如何用CSS实现一个带尖角的框?

5,293 阅读1分钟

在elementUI中我们经常这样的组件: 弹框 对于这样的弹窗,我们很容易写出这样的一个类似的: demo 那么重点就放在了上面的那个尖尖怎么实现: 难点 这个的实现我的思路是这样的: 1.画出一个这样的矩形, 2.在这个矩形的上方某个位置固定一个三角形,就像这样: 画出一个尖尖 这时的代码如下: css1

那么如何实现elementUI中那样有阴影的情况呢? 答案是使用两个三角形,一个是阴影的颜色,一个是框内的颜色,然后第一个三角形比第二个三角形的绝对定位高出边框宽度个像素。 说起来有点难以理解,画出来就是这样:黄色就是边框的阴影 例子 照着这个思路我们接着往下写: 画了一个三角形的情况 此时的代码是这样的:

h2 {
  width: 300px;
  height: 200px;
  border: 1px solid #dedcdc;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  background: white;
}
#test {
    top: 69px;
    left: 30px;
    position: absolute;
    border-width: 10px;
    border-style: solid;
    width: 0px;
    height: 0px;
    border-color: transparent;
    border-bottom-color: #e0dede;
}

最后我们在这个三角形后面再画一个位置低于它一个像素的三角形,并且设为白色: 最终效果 css代码如下:

h2 {
    width: 300px;
    height: 200px;
    border: 1px solid #dedcdc;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    background: white;
}
#test {
    top: 69px;
    left: 30px;
    position: absolute;
    border-width: 10px;
    border-style: solid;
    width: 0px;
    height: 0px;
    border-color: transparent;
    border-bottom-color: #e0dede;
}
#test::after {
    content: "  ";
    top: -9px;
    left: -10px;
    position: absolute;
    border-width: 10px;
    border-style: solid;
    width: 0px;
    height: 0px;
    border-color: transparent;
    border-bottom-color: white;
}