CSS中带有尖底端的垂直线答案

【问题标题】：Vertical line with pointed bottom end in CSSCSS中带有尖底端的垂直线
【发布时间】：2014-07-18 02:03:03
【问题描述】：

只是一个简单的问题：

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

这将是一个 div 的左边框。

非常感谢！

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

【问题讨论】：

也许在你的div 上试试border-left。
@PaulDraper 我认为主要问题是边框的底部，我相信 OP 想要对角线
如果@RaulRene 是正确的，你应该在你的问题中提到这一点。
对不起。是的，主要问题是底部；）

标签： css border line shape css-shapes

【解决方案1】：

用边框试试这个技巧：

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

Fiddle

【讨论】：

border-top 不是必需的，高度控制垂直尺寸对吧？

【解决方案2】：

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

CSS 规则

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

【讨论】：

【解决方案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 的宽度。

【讨论】：

【解决方案4】：

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

<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/

【讨论】：

【解决方案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/

【讨论】：

【解决方案6】：

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

最好的做法是根本不使用边框，因为不同的浏览器会以不同的方式呈现它们 (IE)。有时它甚至可能会破坏您的布局。

【讨论】：

你听说过 box-sizing 和 valid doctype 吗？ :)
您听说过 Internet Explorer 和技术借记卡吗？
然后它是关于怪癖模式，缺少有效的文档类型或文件头错误写入，在较旧的 IE 中是否存在这种糟糕的布局，我一点也不怀念 IE6，但这是 CSS 的好教练学习者