阿小信大人的头像
Talk is cheap. Show me the code. Linus Torvalds

用css画三角形2014-09-03 03:06

其实就是border的应用,让一条边成为一个点

.triangle {
    width:0;     /*必须*/
    height:0;    /*必须*/
    border:6px #fff solid;     /*三角形后面的颜色*/
    border-bottom:0;     /*三角形方向*/
    border-top:6px solid #0094da;     /*三角形颜色和大小*/
    margin:auto;     /*自动居中对齐*/
}

网页内容:

<li id="nav_recruit">
    <a href="/recruit">产品服务</a>
    <div class="triangle"></div>
</li>

刚才要实现一个 有边框的三角形 用上面的方法没成功,想了个办法是直接把一个小的正方形在大的正方形里面旋转45度,背景颜色一样,沿对角线突出一半出去就是三角形,感觉有局限性,必须要大小相差较大应该才适用。

.consult-triangle {
    width:20px;
    height:20px;
    background-color:#0072bf;
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    margin-top:-12px;
    margin-left:40px;
    border-top:2px dotted #000;
    border-right:2px dotted #000;
}
.consult-block {
    background-color:#0072bf;
    height:210px;
    width:170px;
    margin-top:30px;
    border:2px dotted #000;
    color:#fff;
}

网页内容:

<div class="span2 consult-block">
    <div class="consult-triangle"></div>
    <p style="margin-left:20px;margin-right:20px;margin-top:10px;">
        涵盖门户、垂直、论坛、电商、微博等不同网络平台的数据爬取
    </p>
</div>

第一种方法兼容IE,第二种不兼容,解决办法:

filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.5,M12=0.5,M21=-0.5,M22=0.5,SizingMethod='auto expand')

M11, M12, M21, M22是三角函数值,全部设置为绝对值一样就是45度,绝对值大小代表三角形大小

如果您觉得从我的分享中得到了帮助,并且希望我的博客持续发展下去,请点击支付宝捐赠,谢谢!

若非特别声明,文章均为阿小信的个人笔记,转载请注明出处。文章如有侵权内容,请联系我,我会及时删除。

#WEB/前端#  
分享到:
阅读[1786] 评论[0]

你可能也感兴趣的文章推荐

本文最近访客

网友216.*.*.226[Seattle]2020-12-01 06:14
网友116.*.*.41[火星]2020-12-01 06:06
网友13.*.*.17[火星]2020-12-01 05:11
网友185.*.*.19[火星]2020-12-01 05:06

发表评论