html - 如何用 css 修复 html 边框 Angular 斜率？

Question

您可以通过此链接访问以下代码:jsfiddle.net/2NPxV

我的 CSS 代码:

.custom_content { 
display: block; 
width:200px;
height: 30px; 
margin: 5px 0; 
padding: 0 0;   
border: 1px solid #000000;  }  

.left-border-red
{
border-left: 5px solid red;
}

我的 html 代码:

<div class="container">
<div class="row custom_content left-border-red">
My content  
</div>  
</div>

结果:请放大图像以查看矩形的左上角和左下角斜坡区域。 http://rasih.net/se/main.png

问题 1:左上角有坡度。我想修复它。

问题 2:左下角有坡度。我想修复它。

总结:如何为我的输出修复左上角和左下角的斜率？我想同时保留外部黑色边框和内部红色边框。但我不希望任何 Angular 落都有任何坡度。

Answer 1

在这里，查看这个 Fiddle:http://jsfiddle.net/DX7w8/1/

我做的唯一改变是没有使用 border-left 属性，它只会调整正方形的特定部分，我使用了 box-shadow 属性并操纵位置，使其看起来有一个红色的左边框，填充左侧。

我还将 padding-left 增加到 6px，这样文本就不会与边框重叠。

它的优越性是因为我假设您不希望在红色边框之前显示一条黑色左线。这是避免这种情况的最佳方法。

希望这对您有所帮助。