CSS中带尖底的垂直线

Question

只是一个简单的问题：

如何在CSS中创建此垂直形状？

这将是div的左边界。

非常感谢！

更新 主要问题在于线的底部。

Answer 1

尝试使用边框：

div {
  border-left:20px solid orange;
  border-bottom:20px solid transparent;
  width:0;
  height:300px;
}

Fiddle

Answer 2

工作解决方案：http://jsfiddle.net/avi_sagi/F25zD/

CSS规则

div{
  height:100px;
  width:0px;
  border-left:5px solid #aa0;
  border-bottom:5px solid transparent;
}

Answer 3

使用<div>您可以使用此css：

div {
    height: 50px;
    width: 50px;
    border-left: 10px solid gold;
    border-bottom: 10px solid transparent;
}

Here's a fiddle

如果底部呈45°角，则border-bottom必须与border-left相同。要更改角度，请更改border-bottom的宽度。

Answer 4

你可以尝试使用after伪元素，但这是另一种方式：

<div class="container">
<div class="top"></div>
<div class="line"></div>

</div>



.top {
height:20px;
background-color:#f0ae3f;
width:20px;
}
.line {
height:300px;
background-color:#f0ae3f;
width:20px;
-moz-transform: skewX(0deg) skewY(-40deg);
-webkit-transform: skewX(0deg) skewY(-40deg);
-o-transform: skewX(0deg) skewY(-40deg);
-ms-transform: skewX(0deg) skewY(-40deg);
transform: skewX(0deg) skewY(-40deg);
margin-top:-10px;
}

这里有小提琴：http://jsfiddle.net/WgmmU/1/

Answer 5

您可以使用css

中的:after选择器来查看

HTML

<div id="vLine"></div>

CSS

#vLine{
    /* test styling */
    position:absolute;
    top:20px;
    left:100px;
    /* end test styling */
    height:100px;
    width:10px;
    background:orange;
}
#vLine:after{
    content: " ";
    top: 100%;
    border: solid transparent;
    position: absolute;
    border-width: 5px; /* half the width of your line*/
    border-top-color: orange; /* because you want to touch the top with color */
    border-left-color: orange; /* because you want to touch the left with color */
}

小提琴：http://jsfiddle.net/nQKR4/2/

Answer 6

div {
  background-color:orange;
  width:20px;
  height:300px;
 }

最佳做法是不使用边框，因为不同的浏览器会以不同的方式呈现它们（IE）。有时它甚至可能会破坏你的布局。