Question

我想像这样制作div：

attached http://oi62.tinypic.com/334t93o.jpg

有可能用css做这个吗？如果是，怎么样？

Answer 1

我会使用绝对定位的:after伪元素，并使用非官方的CSS三角形。

.date {
  background-color: #006;
  color: #fff;
  width: 200px;
  position: relative;
  text-align: center;
  padding: 20px 0;
}

.date:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 0;
  border-color: #006 transparent transparent transparent
}

演示：http://jsbin.com/yonisaqi/2/edit?html,css,output

Answer 2

是

使用::after伪元素，将其与absolute对齐，然后将其移动到位。然后使用典型的边框技巧制作一个三角形 - 在这种情况下，我认为你需要左边和上边框。

去尝试一下，然后如果你仍然遇到问题，请回复一些代码;）

Answer 3

这可以做到一招：）

http://jsfiddle.net/dxNVa/

<div class="hide">
    <div class="arrow-down"></div>
</div>

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    margin-left:-20px;
    border-top: 20px solid #f00;
}

.hide{
    overflow:hidden;
}

Answer 4

我只想添加此答案以供参考，您甚至不需要任何伪元素，例如:after 但是这会使文本难以集中，而您可能想要为背景使用一些图像或渐变（这不能与此解决方案一起使用）：

div {
 color:white;
 font-size:30px;    
 width:200px;
 height:100px;
 line-height:100px;    
 background:blue;
 background-clip:content-box;
 border-left:20px solid blue;       
 border-bottom:20px solid transparent;
 text-align:center;
}

Fiddle

创建边框三角形CSS

4 个答案: