css实现圆角及三角

最新推荐文章于 2024-01-11 14:30:00 发布

weixin_33928137

最新推荐文章于 2024-01-11 14:30:00 发布

阅读量62

点赞数

原文链接：http://www.cnblogs.com/bobogoodgoodstudy/p/3396181.html

版权

原文来自http://mrthink.net/css-common-round-triangle/

原理是在采用三个div~top、content、bottom，top、bottom层里面加入4个em标签， margin-left，margin-right逐级递减，于是就产生了圆角的感觉

ok废话不多说，上代码先

css：

.content{
    padding:10px;
    height:20px;
    background:#9F3;}
.r_a,.r_b,.r_c,.r_d{
    background:#9F3;
    display:block;
    overflow:hidden;
    height:1px;}
.r_a1{
        margin:0px 5px;
}
.r_a2{
        margin:0px 4px;
}
.r_a{
        margin:0px 3px;
}
.r_b{
        margin:0px 2px;
}
.r_c{
        margin:0px 1px;
}
.r_d{
        margin:0px 1px;
        height:2px;
}

html代码

<body>
<div class="r_top">
  <em class="r_a"></em>
  <em class="r_b"></em>
  <em class="r_c"></em>
  <em class="r_d"></em>
</div>
<div class="content"></div>
<div class="r_bottom">

</div>
</body>

就这样一个圆角就实现了

下面实现三角，这个就比较简单了, 把元素定义成块级0大小(0宽0高0字号0行高)后,设一个border-width 通过改变元素的border-color值实现. 本文用的是em元素, 当然, 如果你项目中用em比较频繁, 为避免冲突也可以用samp,strong等元素.
当然, 即便用CSS实现的三角形, 万恶的IE6还是会给你添点麻烦: IE6不支持border-color的transparent值, 怎么办? 为ie6单独写一个border-color值, 然后用chroma滤镜实现透明, 详见代码

html：

<div class="sj">
   <em></em>
   <em class="a"></em>
   <em class="b"></em>
</div>

Css：

.sj em{
       display:block;
       width:0;
       height:0;
       font-size:0;
       line-height:0;
       border-width:20px;
       border-style:solid;
       border-color:#cf6 #ddd #39c #ffc;
       _filter:chroma(color=#000000)/*色度滤镜,让IE6实现透明borderColor.滤镜的颜色值不可简写*/}
.sj em.a{
    border-color:#0CF transparent transparent transparent;
    _border-color:#0CF #000 #000 #000;
    }
.sj em.b{
    border-color:transparent #0CF transparent transparent;
    _border-color:#000 #0CF #000 #000;
    }

转载于:https://www.cnblogs.com/bobogoodgoodstudy/p/3396181.html

weixin_33928137

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现圆角及三角

原文来自http://mrthink.net/css-common-round-triangle/原理是在采用三个div~top、content、bottom，top、bottom层里面加入4个em标签， margin-left，margin-right逐级递减，于是就产生了圆角的感觉ok废话不多说，上代码先css：.content{ padding:10px;...
复制链接

扫一扫