巧用伪元素绘制带边的三角形--CSS3

最新推荐文章于 2024-09-11 08:45:00 发布

刀尖的舞者

最新推荐文章于 2024-09-11 08:45:00 发布

阅读量775

点赞数

分类专栏：前端文章标签： html5 css3

原文链接：https://www.mk2048.com/blog/blog.php?id=h12a1a1hkjhj&title=%E5%B7%A7%E7%94%A8%E4%BC%AA%E5%85%83%E7%B4%A0%E7%BB%98%E5%88%B6%E5%B8%A6%E8%BE%B9%E7%9A%84%E4%B8%89%E8%A7%92%E5%BD%A2--CSS3

版权

前端专栏收录该内容

280 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="css/style.css">
<style>
    /*向上*/
.triangle_border_up{
    width:0;
    height:0;
    border-width:0 30px 30px;
    border-style:solid;
    border-color:transparent transparent #333;/*透明 透明  灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_up span{
    display:block;
    width:0;
    height:0;
    border-width:0 28px 28px;
    border-style:solid;
    border-color:transparent transparent #fc0;/*透明 透明  黄*/
    position:absolute;
    top:1px;
    left:-28px;
}
/*向下*/
.triangle_border_down{
    width:0;
    height:0;
    border-width:30px 30px 0;
    border-style:solid;
    border-color:#333 transparent transparent;/*灰 透明 透明 */
    margin:40px auto;
    position:relative;
}
.triangle_border_down span{
    display:block;
    width:0;
    height:0;
    border-width:28px 28px 0;
    border-style:solid;
    border-color:#fc0 transparent transparent;/*黄 透明 透明 */
    position:absolute;
    top:-29px;
    left:-28px;
}
/*向左*/
.triangle_border_left{
    width:0;
    height:0;
    border-width:30px 30px 30px 0;
    border-style:solid;
    border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
    margin:40px auto;
    position:relative;
}
.triangle_border_left span{
    display:block;
    width:0;
    height:0;
    border-width:28px 28px 28px 0;
    border-style:solid;
    border-color:transparent #fc0 transparent transparent;/*透明 黄 透明 透明 */
    position:absolute;
    top:-28px;
    left:1px;
}
/*向右*/
.triangle_border_right{
    width:0;
    height:0;
    border-width:30px 0 30px 30px;
    border-style:solid;
    border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_right span{
    display:block;
    width:0;
    height:0;
    border-width:28px 0 28px 28px;
    border-style:solid;
    border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/
    position:absolute;
    top:-28px;
    left:-29px;
}
</style>
</head>
<body>
    <!-- 向上的三角形 -->
    <div class="triangle_border_up">
        <span></span>
    </div>
                                                          
    <!-- 向下的三角形 -->
    <div class="triangle_border_down">
        <span></span>
    </div>
                     
    <!-- 向左的三角形 -->
    <div class="triangle_border_left">
        <span></span>
    </div>
                                            
    <!-- 向右的三角形 -->
    <div class="triangle_border_right">
        <span></span>
    </div>
</body>
</html>

页面效果图：

注：以上网上转载的效果，然后还是结合实际中用到的写法，偶觉得比较简洁的方法。

利用两个伪元素:before与:after为类名为.box_in_answer的元素添加小三角形：

.box_in_answer:before里的display:block很重要，一定要加；.box_in_answer的父元素也一定要加:position:relative。

.box_in_answer:before{content:" ";display:block;width:0;height:0;border-width:0 10px 10px;border-style:solid;border-color:transparent transparent #c4c4c4;position:relative;margin-top:-15px}

.box_in_answer:after{content:" ";display:block;width:0;height:0;border-width:0 9px 9px;border-style:solid;border-color:transparent transparent #f9f9f9;position:absolute;top:32px;left:7px;}

.box_in_answer{border:1px solid #c4c4c4;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;color:#346ab4;font-size:14px;line-height:30px;padding:5px}