Use transparent to make triangles
This time I will bring you the use of transparent to make triangles, and the precautions for using transparent to make triangles. The following is a practical case, let's take a look.
The renderings are as follows
Sample code
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .box{ margin: 40px auto; width: 60px; background-color: #f0ac6b; } .t1{ margin: 40px auto; width: 0px; height: 0px; /*background-color: #f0ac6b;*/ border-bottom: 40px solid red; border-right: 20px solid transparent; border-left: 20px solid transparent; } .t2{ margin: 40px auto; width: 0px; height: 0px; /*background-color: #f0ac6b;*/ border-bottom: 40px solid transparent; border-right: 40px solid red; /*border-left: 20px solid transparent;*/ } .t3{ margin: 40px auto; width: 0; height: 0; border-top: 40px solid red; border-right: 20px solid transparent; border-left: 20px solid transparent; } .t4{ margin: 40px auto; width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid red; } .t5{ margin: 40px auto; width: 0; height: 0; border-top: 40px solid red; border-right: 40px solid transparent; } .t6{ margin: 40px auto; width: 0px; height: 0px; border-left: 40px solid transparent; border-bottom: 40px solid red; } .t7{ margin: 40px auto; width: 0; height: 0; border-left: 40px solid red; border-bottom: 20px solid transparent; border-top: 20px solid transparent; } .t8{ margin: 40px auto; width: 0; height: 0; border-right: 40px solid red; border-bottom: 20px solid transparent; border-top: 20px solid transparent; } </style> </head> <body> <p class="box"> <p class="t1"></p> <p class="t3"></p> <p class="t2"></p> <p class="t4"></p> <p class="t5"></p> <p class="t6"></p> <p class="t7"></p> <p class="t8"></p> </p> </body> </html>
Other related articles!
Recommended reading:CSS3 browser compatibility issues
CSS3 to create a pink login interface
The above is the detailed content of Use transparent to make triangles. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Introduction The Java program for calculating the area of a triangle using determinants is a concise and efficient program that can calculate the area of a triangle given the coordinates of three vertices. This program is useful for anyone learning or working with geometry, as it demonstrates how to use basic arithmetic and algebraic calculations in Java, as well as how to use the Scanner class to read user input. The program prompts the user for the coordinates of three points of the triangle, which are then read in and used to calculate the determinant of the coordinate matrix. Use the absolute value of the determinant to ensure the area is always positive, then use a formula to calculate the area of the triangle and display it to the user. The program can be easily modified to accept input in different formats or to perform additional calculations, making it a versatile tool for geometric calculations. ranks of determinants

To remember some basic multiplication results in tabular or graphical form, use the multiplication table. This article will introduce how to use C++ to generate a multiplication table that looks like a right triangle. Triangular notation is effective in the few cases where a large number of results can be easily memorized. In this format, the table is displayed row by row and column by column, with each row containing only the entries that populate that column. To solve this problem, we need basic loop statements in C++. To display the numbers in a triangular fashion, we need nested loops to print each line one by one. We will see how to solve this problem. Let us see the algorithm and implementation for better understanding. The algorithm takes the number of rows of the multiplication table we want, let's say n. For i from 1 to n, do the following. For j ranging from 1 to i,

We have the area 'a' and the base 'b' of the triangle. As per the problem statement, we need to find the minimum height 'h' using Java programming language. As we know, when the base and height are given, the area of a triangle is −$$\mathrm{area\:=\:\frac{1}{2}\:*\:base\:*\: Height}$$ By using the above formula, we can get the height from -height=(2*area)/base and then by using the built-in ceil() method, we can get the minimum height. Show you some examples to show you the Chinese translation of Instance-1: Example-1 Suppose the given area = 12 and base = 6 and then use the formula

It was previously reported that Huawei's P70 series 5G imaging flagship is planned to be released in late March, and three new models, P70, P70Pro and P70Art, are expected to be launched. Now more information about the appearance design of these new phones has been exposed. As you can see in the picture above, the latest leaked pictures show that the Huawei P70 series is the same as earlier rumors. It is expected that the rear modules of P70 and P70Pro will use triangular Deco (see the center model in the picture above), while the P70Art will be based on the triangular Deco A few changes, more bold and irregular. Above is the Huawei P70 third-party mobile phone case exposed by @digitalchatstation. What do you think if the Huawei P70 series ends up looking like this? Historical information

A rectangle is a quadrilateral with opposite sides equal and parallel. Adjacent sides form 90°. A triangle is a closed figure with three sides. The largest triangle inscribed in a rectangle. The base is equal to the length of the rectangle, and the height of the triangle is equal to the width of the rectangle. Area = (½)*l*b Area of the largest triangle inscribed in a rectangle = (½)*l*b Program to calculate the area of the largest triangle within a rectangle - sample code #include<stdio.h>intmain(void){ intl= 10,b=9; floatarea; area=(f

Let's see how to count the number of triangles on a plane given n points, and limit the number of collinear points to no more than two. Counting the number of triangles in a plane with no more than two collinear points is a typical problem in computational geometry, which has applications in computer graphics, image processing, and other areas of computer science. For example, when creating a 2D image from a 3D scene in 3D graphics, the problem of calculating triangles in a plane with no more than two collinear points may arise. In this case, the triangle counting process can be used to determine how many triangles are present in the final 2D image after projecting the 3D scene onto a plane. This allows you to determine the complexity of the scene and increase rendering speed. In image processing, we may want to count the number of unique objects or shapes in an image. This problem is very

As we all know, a triangle is a polygon with 3 sides. It consists of three edges and three vertices. The sum of the three interior angles is 180 degrees. In a valid triangle, if you add any two sides, it will be greater than the third side. As per our problem statement, we have to check if the triangle is valid if given three sides using Java programming language. Therefore, we must check whether the following three conditions are met. If satisfied, the triangle is valid, otherwise the triangle is invalid. Suppose a, b, c are the three sides of a triangle. a+b>cb+c>ac+a>b shows you some examples Example 1 If the sides are a=8, b=9, c=5 then by using the above logic, a+b=8+9=17 whic

Suppose we want to create a Triangle class and another subclass called Isosceles. The Triangle class has a function for printing that the object is of type triangle, while Isosceles has two functions for displaying that it is an isosceles triangle and a description. We also need to call the parent class function through the Isosceles class object. Without proper input, we just call the function in the appropriate way. So, if the input is to define an object named trg and then call trg.isosceles(), trg.description(), trg.triangle(), then the output will be that this is an isosceles triangle in an isosceles triangle
