我怎么能在div的设计中做箭头这样的事情？

Question

我怎么能在div的设计中做箭头这样的事情？

Answer 1

如果你想做一个三角形，做这样的事情......我会把定位留给你。

HTML

<div class="triangle"></div>

CSS

.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 9px 15px 9px;
border-color: transparent transparent #007bff transparent;
}

例如，三角形是蓝色的......你显然希望将它变成白色/透明，以达到你想要达到的效果。

jsFiddle here

对于定位，我建议使用:after / :before伪选择器。

Answer 2

<aside></aside>

aside {
   background: lightgray;
   height: 5em;
   position: relative;
   width: 10em;
}

aside::after {
   background: lightgray; 
   border-bottom: .8em solid lightgray;
   border-left: .4em solid transparent; 
   border-right: .4em solid transparent;
   content: "";
   left: 10%;
   position: absolute;
   top: -.6em;
}

http://jsfiddle.net/7UUqa/4/

Answer 3

使用边框将三角形创建为伪元素是一种方法，但您的模型包含一个盒子阴影。如果你不想牺牲盒子阴影（因为使用边框技术，它会创建一个方形阴影，看起来很糟糕），有一种方法。

创建两个伪元素，将其设置为绝对定位的正方形，并将它们旋转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;
}