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

用css写三角

时间:2015-09-28 11:28:18      阅读:289      评论:0      收藏:0      [点我收藏+]

标签:

题目:

请用CSS实现如下图的样式,相关尺寸如图示,其中dom结构为:
<div id=”demo”></div>
技术分享
思路,
1)两个元素a,b:width与heigh设为0 left设为100%(这样要求父元素demo的position:relative,而ab的position:absolute)
2)border设为transparent,然后border-left下面的元素设为#000黑色,上面的元素设为#fff白色(下面的元素border比上面的大2px)
具体代码:
html:
<div id="demo"></div>

css:

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

 

用css写三角

标签:

原文地址:http://www.cnblogs.com/danranysy/p/4843344.html

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