码迷,mamicode.com
首页 > Web开发 > 详细

css 实现三角形

时间:2016-01-16 12:01:09      阅读:269      评论:0      收藏:0      [点我收藏+]

标签:

三角形可用CSS的border实现。

width:0;
height:0;
border-right:10px solid red;
border-top:10px solid transparent;//设置透明
border-bottom:10px solid transparent;

三角形 顶点在哪边 就 不设置哪边的border值 ,三角形向左或向右,则设置border的顶部和底部为相同像素的透明色。三角形的高则为像素的点素,即px值。

另外CSS选择器中,after和before表示在前后插入内容。

eg:请用CSS实现如下图的样式,相关尺寸如图示,其中dom结构为:
<div id=”demo”></div>

技术分享

 

#demo{
    width:100px;
    height:100px;
    border: 2px solid #000;
   position:relative;
}
#demo:after,#demo:before{
  width:0px;
  height:0px;
  position:absolute;
  left:100%: 
}
#demo:after{
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:10px solid #fff;
  top:20px;
}
 
#demo:before{
  border-top:12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left:12px solid #000;
  top:18px;
}

css 实现三角形

标签:

原文地址:http://www.cnblogs.com/cyanqq/p/5135174.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!