1

How can I do thing like arrow in design of div? div

4

3 回答 3

2

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

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

查看 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;
}
于 2013-09-03T00:56:04.387 回答
2

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

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伪选择器。

于 2013-09-02T22:01:20.447 回答
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/

于 2013-09-02T22:01:58.933 回答