CSS实现带阴影效果的三角形

来源：互联网发布：ipv6有什么好处知乎编辑：程序博客网时间：2024/04/28 08:56

目标效果

用将width和height设置为0，通过border特性来实现三角形的效果的方法，想必很多人都实现过。
但是如果要求三角形边缘具有阴影效果，这样一来以前的实现方式显然是不行，因为box-shadow属性对border内部的边缘是没有效果的。
今天公司的交互图上正好要实现这种效果，经过一番搜寻和思考，最终通过一种在原来的方式上稍作升级的方式实现了这一效果。
实现的关键就是给border-top和border-right两个三角形同时设置颜色，将两个小三角形融合成一个大的三角形，然后通过transform进行旋转操作，将盒模型原本的两条边作为三角形的腰，对外展示，再对其设置box-shadow效果，实现阴影效果。

具体实现

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>CSS实现带阴影效果的三角形</title>  <style>    .box {      position: relative;      width: 600px;      height: 400px;      background: #fff;      border: 1px solid #ccc;      box-shadow: 2px 2px 2px #ccc;    }    .box:after {      position: absolute;      display: inline-block;      top: 380px;      left: 300px;      width: 0;      height: 0px;      content: '';      border-style: solid;      border-width: 20px;      border-color: #fff #fff transparent transparent;      transform: rotate(135deg);      box-shadow: 2px -2px 2px #ccc;    }  </style></head><body>  <div class="box">  </div></body></html>

运行结果

带阴影效果的三角形

阅读全文

1 0