的CSS：三角形後

Github上使用兩個::after元素來展現圍成的三角形的綠色邊框。

像這樣：

我能得到與只使用一個::after選擇同樣的結果？
我想知道這樣的事情是否可能。

2017-04-27 amin

@dippas有比這更好的重複嗎？這個問題措辭不妙，答案都是指外部網站（jsfiddle等），並不是專門針對帶邊框的三角形。我認爲這正在形成更高的質量。 – Michael

你可以試試這個

div { 
 
    width:300px; 
 
    height:100px; 
 
    background:#fff; 
 
    border:1px solid green; 
 
    position:relative; 
 
    padding:20px; 
 
} 
 
    
 
div:after { 
 
    content:""; 
 
    position:absolute; 
 
    right:-11px; 
 
    top:30px; 
 
    width:20px; 
 
    height:20px; 
 
    background:#fff; 
 
    border:1px solid green; 
 
    border-left:none; 
 
    border-bottom:none; 
 
    transform:rotate(45deg); 
 
    -webkit-transform:rotate(45deg); 
 
    user-select:none; 
 
    -webkit-user-select: none; 
 
}

<div> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
 
    veniam,quis nostrud exercitation 
 
</div>

來源

2017-04-27 11:30:52 LKG

我檢查過，它在IE11左邊的距離太遠了1px。 Github的版本可能更加一致，這就是他們這樣做的原因嗎？ – Michael

您可以爲

div { 
 
    width: 300px; 
 
    height: 200px; 
 
    background: #fff; 
 
    border: 1px solid #1db73f; 
 
    position: relative; 
 
    padding: 20px; 
 
    border-radius:5px; 
 
} 
 
div:before { 
 
    content: ""; 
 
    position: absolute; 
 
    right: -20px; 
 
    top: 30px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 20px solid transparent; 
 
    border-bottom: 20px solid transparent; 
 
    border-left: 20px solid #fff; 
 
    z-index:1; 
 
} 
 
div:after { 
 
    content: ""; 
 
    position: absolute; 
 
    right: -21px; 
 
    top: 30px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 20px solid transparent; 
 
    border-bottom: 20px solid transparent;  
 
    border-left: 20px solid #1db73f; 
 
}

<div> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div>

使用 :after & :before選擇

來源

2017-04-27 11:38:41

的CSS：三角形後

回答

相關問題