乍一看，很简单，做小三角，首先想到的是利用border的transparent特性，可以制作出小三角的效果。但是注意，这个小三角本身就是边框制作出来的。怎么能在小三角的外边再加一层小边框呢。那就必须再叠加一层一样的东西，让两者有1px的错位。问题就解决了。不想在页面添加多余的无意义的标签，还想实现这个效果。首先想到的就是用元素的伪类来实现。
首先想到的是给小三角加一个box-shadow属性，问题就可能很轻松的解决了，可是问题往往没有那么简单。
box-shadow只加在border外边缘，跟我们想要的真的是差太多。仲么办呢？跟上面的原理差不太多，只是要用到css3中transform,把元素rotate(45deg),变成两个菱形，然后对底下的元素加box-shadow，然后用后面的元素覆盖底下的元素。代码如下：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>小三角带边框带阴影的div——css实现效果</title>
9 <style>
10 .box2 {
11 float: left;
12 position: relative;
13 width: 100px;
14 height: 100px;
15 border: 1px solid red;
16 margin-left: 50px;
17 margin-right: 50px;
18 margin-top: 20px;
19 margin-bottom: 20px;
20 box-sizing: border-box;
21 font-size: 14px;
22 padding: 10px;
23 box-shadow: 0 0 2px rgba(0, 0, 0, .5)
24 }
25
26 .box2:before,
27 .box2:after {
28 position: absolute;
29 content: ‘‘;
30 width: 14px;
31 height: 14px;
32 bottom: -8px;
33 left: 50%;
34 margin-left: -7px;
35 overflow: hidden;
36 pointer-events: none;
37 -webkit-transform: rotate(45deg);
38 -mz-transform: rotate(45deg);
39 transform: rotate(45deg);
40 }
41
42 .box2:before {
43 background: red;
44 box-shadow: 1px 1px 2px rgba(0, 0, 0, .5)
45 }
46
47 .box2:after {
48 bottom: -7px;
49 background: #fff;
50 }
51 </style>
52 </head>
53
54 <body>
55 <div class="box2"></div>
56 </body>
57
58 </html>
原文地址：https://www.cnblogs.com/jialinG/p/9389970.html
时间： 2024-10-13 01:18:13