Using CSS to achieve triangular effects

CSS Border principle

The border of a div or element is not a high-level line in our intuitive sense, but a contour ladder or triangle (width-height of 0 o'clock), which can be viewed as a result:

Html:

<div class= "Arrow1" ></div>

Css:

. arrow1{

font-size:0; /* The height of the default will be open, clear height here */

width:0;

height:0;

border-width:30px;

Border-style:solid;

border-color:red Blue green Orange;

}

You can see that each direction of the border is a triangle, then we just need to set the direction of the remaining direction of the border to be transparent or hidden away in order to get a triangle in any direction.

We use a drop-down icon as an example to get an icon to change the left and right borders of border to transparent, CSS changes as follows:

. arrow1{

font-size:0; /* The height of the default will be open, clear height here */

width:0;

height:0;

border-width:30px 30px 0;

Border-style:solid dashed dashed;

/* Set for dashed in order to be compatible with ie6*/

border-color:red Transparent transparent;

}

What if we want to achieve the effect? Very simple, do two small triangles, one is the background color, one is the border color, Java, and then use the positioning overlap together, remember their positioning to a pixel difference between oh ~

Html:

<div class= "Message-box" >

<span> Hello, Welcome to join US!</span>

<div class= "Triangle-border tb-border" ></div>

<div class= "Triangle-border tb-background" ></div>

</div>

Css:

. message-box {

position:relative;

width:240px;

height:60px;

line-height:60px;

Background: #E9FBE4;

box-shadow:1px 2px 3px #E9FBE4;

border:1px solid #C9E9C0;

border-radius:4px;

Text-align:center;

Color: #0C7823;

}

. triangle-border {

Position:absolute;

left:30px;

Overflow:hidden;

width:0;

height:0;

border-width:10px;

Border-style:solid dashed dashed;

}

. tb-border {

bottom:-20px;

Border-color: #C9E9C0 Transparent transparent;

}

. tb-background {

bottom:-19px;

Border-color: #E9FBE4 Transparent transparent;

}

Using CSS to achieve triangular effects