CSS——小三角带边框带阴影

乍一看，很简单，做小三角，首先想到的是利用border的transparent特性，可以制作出小三角的效果。但是注意，这个小三角本身就是边框制作出来的。怎么能在小三角的外边再加一层小边框呢。那就必须再叠加一层一样的东西，让两者有1px的错位。问题就解决了。不想在页面添加多余的无意义的标签，还想实现这个效果。首先想到的就是用元素的伪类来实现。

首先想到的是给小三角加一个box-shadow属性，问题就可能很轻松的解决了，可是问题往往没有那么简单。

box-shadow只加在border外边缘，跟我们想要的真的是差太多。仲么办呢？跟上面的原理差不太多，只是要用到css3中transform,把元素rotate(45deg),变成两个菱形，然后对底下的元素加box-shadow，然后用后面的元素覆盖底下的元素。代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>小三角带边框带阴影的div——css实现效果</title>

     <style>

         .box2 {

             float: left;

             position: relative;

             width: 100px;

             height: 100px;

             border: 1px solid red;

             margin-left: 50px;

             margin-right: 50px;

             margin-top: 20px;

             margin-bottom: 20px;

             box-sizing: border-box;

             font-size: 14px;

             padding: 10px;

             box-shadow: 0 0 2px rgba(0, 0, 0, .5)

         }

         .box2:before,

         .box2:after {

             position: absolute;

             content: '';

             width: 14px;

             height: 14px;

             bottom: -8px;

             left: 50%;

             margin-left: -7px;

             overflow: hidden;

             pointer-events: none;

             -webkit-transform: rotate(45deg);

             -mz-transform: rotate(45deg);

             transform: rotate(45deg);

         }

         .box2:before {

             background: red;

             box-shadow: 1px 1px 2px rgba(0, 0, 0, .5)

         }

         .box2:after {

             bottom: -7px;

             background: #fff;

         }

     </style>

 </head>

 <body>

     <div class="box2"></div>

 </body>

 </html>

巴特西

CSS——小三角带边框带阴影

最新文章

热门文章