css - 我怎样才能在 div 的设计中做箭头之类的事情？

Question

如何在 div 设计中做箭头之类的事情？

Answer 1

使用边框创建一个三 Angular 形作为伪元素是一种方法，但您的模型包含一个框阴影。如果你不想牺牲 box-shadow(因为使用 border 技术，它会创建一个方形阴影，看起来很糟糕)，有一个方法。

创建 两个 样式为绝对定位正方形的伪元素，并将它们旋转 45 度。仅将其中一个设置为低于默认值 (z-index: -1) 的堆叠顺序，并将框阴影应用于该元素。

Check out the jsFiddle

HTML:
<div class="container"></div>

CSS:

.container:before,
.container:after {
    content: '';
    width: 2em; height: 2em;
    position: absolute; top: -1em; left: 50%;
    margin-left: -.5em;
    background: green;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

.container:before {
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow: 0 0 5px black;
    box-shadow: 0 0 5px black;
    z-index: -1;
}