css - 如何制作css边框形状

Question

我使用以下代码创建了一个框：

width:153px;
height: 39px;
border: 1px solid #cfcfcf;

它的输出是普通的盒子。但我想让它的形状如下：

--/\---

我必须编写什么CSS代码才能使它变成这样？我尝试了许多边界代码，但没有奏效。

Answer 1

事实证明，是的，你可以。老实说，我无法正确解释它，因为用 css 做多边形是我仍然无法掌握的事情之一。我花了大约 6 次尝试交换边界方向以使三角形指向上方。所以这里是css。

本文包含您需要的一切以及更多内容。http://css-tricks.com/examples/ShapesOfCSS/#triangle-up

http://jsfiddle.net/9HRBb/

.box {
    width:153px;
    height: 39px;
    border: 1px solid #cfcfcf;
    margin-top:50px;
    position:relative;
}

.box:before {
    position:absolute;
    content:'';
    width:0;
    height:0;
    top:-10px;
    left:50px;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:20px solid #cfcfcf;
}

.box:after {
    position:absolute;
    content:'';
    width:0;
    height:0;
    top:-8px;
    left:52px;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:18px solid white;
}

Answer 2

您必须使用以下语法：

.class:after 
{
 content: '';
position: absolute;
border-width: 10px;
border-style: none solid solid solid;
border-color: transparent transparent black;
right: 0px;
}

Answer 3

演示

<span class="box"> This is a tooltip! </span>

.box{
  position:relative;
  background:#000;
  color:#fff;
  display:inline-block;
  padding:15px;
  border-radius:5px;
}
.box:after{
  position:absolute;
  content:'';
  left:50%;
  margin-left:-10px;
  top:-20px;
  border: 10px solid transparent;
  border-bottom: 10px solid #000;
}

---

演示

.box{
  position:relative;
  background:#fff;
  display:inline-block;
  padding:15px;
  border-radius:5px;
  border:1px solid #888;
}
.box:after{
  position:absolute;
  content:'';
  height:20px;
  width:20px;
  background:#fff;
  left:50%;
  margin-left:-10px;
  top:-11px;
  border-top:1px solid #888;
  border-left:1px solid #888;

  -webkit-transform: rotate(45deg);  /* Saf3.1+ */     
  -moz-transform: rotate(45deg);  /* FF3.5/3.6 */
  -ms-transform: rotate(45deg);  /* IE 9+ */
  -o-transform: rotate(45deg);  /* Opera 10.5 */
  transform: rotate(45deg);  /* Newer browsers (incl IE9) */
}