如何解決與CSS CSS邊界的角落斜率？

您可以通過下面的鏈接訪問下面的代碼：jsfiddle.net/2NPxV 如何解決與CSS CSS邊界的角落斜率？

我的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：左下角有斜坡。我想修復它。

摘要：如何修復左上角和左下角的斜率以獲得輸出結果？我想同時保持外部黑色邊框和內部紅色邊框。但我不想要任何角落的任何坡度。

來源

2014-02-17 Ras

將此小提示添加到您的文章：http://jsfiddle.net/2NPxV/ – EfrainReyes

，而不是左邊框您可以使用:before或:after僞元素和風格，看你想怎麼

.left-border-red:before { 
    content:''; 
    border-left: 5px solid red; 
    height: 100%; 
    width: 0; 
    display: block; 
    float:left; 
}

http://jsfiddle.net/valentin/2NPxV/1/

來源

2014-02-17 23:52:04 Valentin

這裏，看看這個小提琴：http://jsfiddle.net/DX7w8/1/

我做的唯一的改變是不使用border-left屬性，這隻會導致平方的特定部分被調整，我使用box-shadow屬性，並操縱該位置，使其看起來有一個紅色的左邊框，填滿左側。

我還將padding-left增加到了6px，這樣文字看起來沒有重疊邊框。

這是優越的，因爲我假設你不想在你的紅色邊框之前顯示黑色的左邊線。這是避免這種情況的最好方法。

希望這會有所幫助。

來源

2014-02-17 23:54:15 dpwivagg

您的解釋令人驚歎。非常感謝你。你的答案對我來說都足夠了。我在我的問題中指定了這個句子 - 我想同時保持外部黑色邊框和內部紅色邊框。所以，瓦倫丁的答案適用於此。但我無法阻止自己說謝謝。 – Ras

如何解決與CSS CSS邊界的角落斜率？

回答

相關問題