Home  >  Article  >  Web Front-end  >  Detailed explanation of examples of using CSS to achieve triangle effects

Detailed explanation of examples of using CSS to achieve triangle effects

高洛峰
高洛峰Original
2017-03-04 10:34:141480browse

Method 1: Use border to set the border, the element has height and width

<i class="triangle"></i>

.triangle {    
     transform: rotate(45deg);    
     display: block;    
     width: 12px;    
     height: 12px;    
     border: 1px solid #9e9e9e;    
     border-top-color: transparent;    
     border-right-color: transparent;    
     background-color: #fff;    
}

##Effect:

Detailed explanation of examples of using CSS to achieve triangle effects

#Use the transform attribute to rotate the triangle to achieve the desired effect.

Method 2: Use border to support the triangle

<i class="triangle"></i>

.triangle {    
     display: block;    
     position: absolute;    
     width: 0;    
     border-width: 6px;    
     border-color: transparent transparent red;    
     border-style: dashed dashed solid;    
     top: -12px;    
     right: 76px;    
}

##Effect :

Detailed explanation of examples of using CSS to achieve triangle effects

Application scenario: Click 234 or click to select when the triangle points to the corresponding option

Detailed explanation of examples of using CSS to achieve triangle effects

Tips: 1. Learn to often use pseudo elements such as after or before to implement triangles

2.

The difference between the two methods: The second method sets the triangle background color and the border color to be the same; the first method sets the triangle background color and the border color The colors can be different; the method needs to be selected according to the effects of different application scenarios. The second method can also achieve different effects of background color and border color by using two triangle covers with different colors.

The above simple example of using CSS to achieve the triangle effect is all the content shared by the editor. I hope it can give you a reference, and I hope you will support the PHP Chinese website.

For more detailed examples of CSS achieving triangle effects, please pay attention to the PHP Chinese website for related articles!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn