Using CSS to achieve the sharp corners of the page, small triangles, different directions, sharp corners

This time to bring you to use CSS to achieve the page's sharp corners, small triangles, different direction of the sharp angle, using CSS to achieve the page's sharp corners, small triangles, different directions of the point of attention to the points, the following is the actual case, to look at.

：

Method One:

Method Two:

Method Three:

Method 1: Because there is a background, all the implementation is more convenient, sharp angle of the interior of the same color can not consider the occlusion problem

Html:

<p id= "First" >  <p> Small Triangular implementation with background color is relatively simple! </p>    <span id= "Top" ></span>  </p>

Css

#top {        position:absolute;      width:0px;      height:0px;      line-height:0px;/* in order to prevent the occurrence of IE under the question * *      border-bottom:10px solid #89b007;      border-left:10px solid #fff;      border-right:10px solid #fff;      left:76px;      Top: -10px;  }  #first {      border-radius:8px;      -moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;-webkit-border-radius:8px;      Position:absolute;      height:150px;      width:300px;      Background: #89b007;      left:22px;      top:33px;  }  #first p{padding:10px; line-height:1.5; color: #FFF;}

Method 2:

Html

<p class= "W" >    <p class= "x" >      <p><a href= "#" > Use object-oriented thinking to write CSS, use object-oriented mentality to write CSS. </a></p>      <span class= "z" > </span> <span class= "y" > </span> </p>  </p>

Css

* {  margin:0;  padding:0;  }  a{color: #666; text-decoration:none; line-height:25px; text-indent:24px;}  . w{width:200px; position:absolute; background: #999; left:400px; top:200px; font-size:12px; text-align:left}/* Simulates the gray shadow background layer *  /. x{width:180px; position:relative; background: #fff;  border:1px solid #ccc; padding:10px; left:-4px; top:-4px;} /* Content p*/  . Y,. z{  Position:absolute;  left:141px;  }  . y{  color: #ccc;  font-size:19px;  top:-12px;  z-index:1;  } /* Simulate the small triangle * *  . z{  color: #fff;  font-size:19px;  top:-11px;  Z-index:3;  } /* Analog Small triangle * *

Method 3:

<p id= "Content" > <span class= "Out" ></span><span class= " Iner "></span> <span class=" right "></span> <p> no matter what the content, in short, to achieve a no-map of the small triangle, if there is a background color that is very good, No, you can, just a little bit more trouble </p> </p> 

#content {text-indent:2em;  box-shadow:0px 0px 10px #999;  padding:10px;  font-size:12px;  line-height:1.5;  border-radius:5px;  height:100px;  width:250px;  position:relative;  margin:200px Auto;  border:1px solid #CCC;  } span {Position:absolute;  left:25px;  height:0px;  width:0px;  }/* Upper small triangle implementation style Start */span.out {line-height:0;  border-width:10px;  Border-color:transparent transparent #CCC transparent;  Border-style:dashed dashed solid dashed;  Top: -20px;  } span.iner {border-width:10px;  Border-color: #fff transparent #FFF transparent;  Border-style:dashed dashed solid dashed;  Top: -19px;  line-height:0;  }/* Start of the right small triangle implementation style */span.right {background: #FFF;  border-width:1px;  width:16px;  height:16px;  Border-color: #CCC #CCC Transparent transparent;  Border-style:solid solid dashed dashed;  left:270px;  top:30px;  border-radius:0 0 100% 0;/* Here radius values do not select absolute value because in the process of zooming in or out will result in the phenomenon of blocking mouth */line-height:0;  box-shadow:5px 0 10px #aaa; }

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Using CSS3 to realize the effect of projectile screen

You don't know the upset CSS properties

How to omit CSS custom text