用css实现三角形效果

最新推荐文章于 2021-10-18 09:07:19 发布

美丽爱学习

最新推荐文章于 2021-10-18 09:07:19 发布

阅读量240

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/u014611599/article/details/49002107

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用CSS实现三角形效果及图片特殊显示的方法。通过调整边框宽度和颜色，可以创建不同方向的三角形；同时利用伪元素:before和:after实现图片的嵌套效果。

<!DOCTYPE html>
<html>
<head>
<style>
<!--实现三角形效果-->
.m{margin:20px;
   float:left;
   width:0;
   height:0;
   border:solid transparent;
   border-width:12px; 
}
.left{border-left-color:#000;}
.right{border-right-color:red;}
.top{border-top-color:blue;}
.bottom{border-bottom-color:pink;}
<!--实现图片呈现的效果-->

#demo1{
margin-top:20px;
width: 100px;
    height: 100px;
    background-color: #fff;
    position: relative;
    border: 2px solid #333;
}
#demo1:after,#demo1:before{
   border:solid transparent;
   position:absolute;
   left:100px;
   width:0;
   height:0;
   content:'';
}
#demo1:before{
  border-left-color:#000;
  top:18px;
  border-width:12px;
}
#demo1:after{
  border-width:10px;
  border-left-color:#fff;
  top:20px;
}
</style>
</head>
<body>
<div class="m left"></div>
<div class="m right"></div>
<div class="m top"></div>
<div class="m bottom"></div>

<div id="demo1"></div>

</body>

以上代码实现图片实现的两个效果

.left .right .top .bottom 四个类的样式是控制三角形的方向

.m 类中设置宽高都为0，然后通过border-width来控制三角形的大小，在只有单个边或者是对边的情况下，border是以三角形呈现的，也就是将border沿着对角切开为四块，取其中一块，或者对角的两块。从而实现三角形的效果。

而在实现demo1的效果时，用选择器 :after :before 代替一个div从而实现效果两个嵌套，大的放底层(before) 小的放上层(after)