帶有邊框的色帶

可以創建帶邊框的色帶。我創建默認功能區是這樣的：帶有邊框的色帶

但我需要的帶狀這一點。我無法使用圖像。

什麼是最佳的解決方案？

2014-11-05 Jure Jager

你不會得到沒有圖像的45°角。 Id做它的插圖，並將其導出爲SVG，這將是我認爲最乾淨的解決方案（IE9 +瀏覽器支持）;編輯確定有-webkit-transform：rotate（45deg）;但編號仍然在SVG中執行（技術上與圖像一樣多html + css） – for3st 2014-11-05 10:04:26

您可以發佈小提琴或您用於創建無邊框的代碼 – Quince 2014-11-05 10:14:25

http://jsfiddle.net/u2o1k8jp/1/ somethink像那樣。 – 2014-11-05 10:36:45

This是我能做的最好的。

h1 span:before, h1 span:after { 
    content: ""; 
    height: 90%; 
    margin-top: 2px; 
    width: 70px; 
    border: 3px solid black; 
    position: absolute; 
    top: 0; 
} 
h1 span:before { 
    right: 100%; 
    border-left: 0 none; 
} 
h1 span:after { 
    left: 100%; 
    border-right: 0 none; 
} 

h1:before, h1:after { 
    content: ""; 
    height: 31px; 
    width: 31px; 
    margin-top: 8px; 
    position: absolute; 
    top: 0; 
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 

h1:before { 
    border-top: 3px solid black; 
    border-right: 3px solid black; 
    right: calc(100% + 70px - 16px); 
} 
h1:after { 
    border-bottom: 3px solid black; 
    border-left: 3px solid black; 
    left: calc(100% + 70px - 16px); 
}

注意：

不會與舊的瀏覽器工作不支持：transform，calc，:before和:after
這適用於標題的任何長度但是，如果更改字體大小，則必須手動更改h1:before, h1:after的寬度和高度。

來源

2014-11-05 10:49:42

帶有邊框的色帶

回答

相關問題