股利與切出邊緣，邊界和透明背景

Question

我一直在試圖找出如何在CSS自定義形狀視覺上看起來是這樣：

隨着background:rgba(44, 44, 48, 0.9)財產和border:6px solid rgba(29, 30, 35, 0.9);

我的問題是，我不能找到一種方法，使右上和左下邊框看起來像我提供的圖像。嘗試了關於CSS-Tricks的CSS自定義形狀的提示，但它似乎無法解決問題，因爲它不能具有背景。有任何想法嗎？

Answer 1

不幸的是，您不能將僞元素添加到僞元素中（即:after:after{}將不起作用） - 像您的複雜形狀，您可能必須使用cheat a little並依賴子元素的僞元素。

<div class="fancy-box"> 
    <h2>Title</h2> 
    <p>Content</p> 
</div> 

.fancy-box{/*container, top+bottom borders*/} 
.fancy-box:before{/*left-top "square" corner*/} 
.fancy-box:after{/*right-bottom "square" corner*/} 
.fancy-box>p:before{/*left-bottom "dog ear" border*/} 
.fancy-box>p:after{/*right-top "dog ear" border*/} 
.fancy-box>h2:before{{/*left-bottom "dog ear" background*/} 
.fancy-box>h2:after{/*right-top "dog ear" background*/} 

同樣，this fiddle顯示你將如何與純色工作（相當不錯，雖然我不喜歡「薄」的角度） - 但這fail when you apply opacity。您最好的做法可能是將「狗耳朵」製作成預渲染的半透明PNG，額外信貸you could base64-encode them。

的「解決方案」上面是一個完整的語義恐怖雖然 - 您可以使用多個背景與預渲染的顯卡有更好的運氣。

Answer 2

嗯，我認爲你需要使用一個以上的elements..I那種能夠實現這一形狀有三個元素和2種僞元素..看一看在這裏http://codepen.io/zwongso/pen/vgxdB

這是不完全一樣形狀作爲你的形象，但你應該明白..要得到這個邊界將有點棘手tho ..

我想知道是否有人有更好的解決方案..這有點沒有語義有2個空元素只是爲了演示的需要..

Answer 3

的SVG背景可能是一個很好的解決方案，雖然你可能有與S的一些問題upport。見When can I use… SVG in CSS backgrounds。此外，他們很棘手，因爲任何事情都可以正常工作。如果您確實使用SVG背景，那麼一定要考慮將其作爲數據URI嵌入到您的CSS中（請參閱fiddle，同時還注意到了小提琴中的警告:-p）。

Answer 4

如果您用3d思考，則可以使用perspective和rotateX()屬性來更改元素的一個或兩個角度。

這將允許您在容器的風格僞構件給他們所需的形狀和切出的右上方和左下方的角落。

你也可以得到所需要的邊界的形狀，（見下面的演示）：

DEMO

輸出：

div { 
 
    position: relative; 
 
    width: 50%; 
 
    height: 300px; 
 
    margin: 10% auto; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    border-top: 6px solid rgba(0, 0, 0, 0.8); 
 
    border-bottom: 6px solid rgba(0, 0, 0, 0.8); 
 
} 
 
div:before, 
 
div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: -6px; 
 
    width: 20%; 
 
    height: 100%; 
 
} 
 
div:before { 
 
    right: 100%; 
 
    background: inherit; 
 
    border-top: 6px solid rgba(0, 0, 0, 0.8); 
 
    border-left: 6px solid rgba(0, 0, 0, 0.8); 
 
    border-bottom: 6px solid rgba(0, 0, 0, 0.8); 
 
    -webkit-transform-origin: 100% 0; 
 
    transform-origin: 100% 0; 
 
    -webkit-transform: perspective(1px) rotateY(-0.15deg); 
 
    transform: perspective(1px) rotateY(-0.15deg); 
 
} 
 
div:after { 
 
    left: 100%; 
 
    border-top: 6px solid rgba(0, 0, 0, 0.8); 
 
    border-right: 6px solid rgba(0, 0, 0, 0.8); 
 
    border-bottom: 6px solid rgba(0, 0, 0, 0.8); 
 
    border-left: none; 
 
    background: inherit; 
 
    -webkit-transform-origin: 0 100%; 
 
    transform-origin: 0 100%; 
 
    -webkit-transform: perspective(1px) rotateY(0.15deg); 
 
    transform: perspective(1px) rotateY(0.15deg); 
 
}

<div></div>

Answer 5

您可以創建只使用一個元素的形狀，用簡單的transforms和overflow: hidden;性能

您可以在另一個元素添加內容：

body { 
 
    background: url(http://i.imgur.com/RT7XR3C.jpg); 
 
    background-size: cover; 
 
} 
 
div { 
 
    height: 200px; 
 
    width: 300px; 
 
    margin: 40px auto; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
div:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: -58px; /*-half buffer -left border*/ 
 
    height: 188px; 
 
    width: 400px; 
 
    background: rgba(30, 30, 30, 0.8); 
 
    -webkit-transform: skewX(45deg); 
 
    -moz-transform: skewX(45deg); 
 
    transform: skewX(45deg); 
 
    border-left: 8px solid #222; 
 
    border-right: 8px solid #222; 
 
    border-top: 6px solid #222; 
 
    border-bottom: 6px solid #222; 
 
} 
 
div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 157px; 
 
    width: 6px; 
 
    background: #222; 
 
    box-shadow:0 0 0 0 #222, 294px 43px 0 0 #222; 
 
}

<div></div>

FIDDLE

輸出：

Answer 6

有了CSS3，你可以使用border-image來實現這一目標。我在這裏使用的內聯SVG，但是任何圖像會工作：

body { 
 
    background: url(http://i.imgur.com/RT7XR3C.jpg); 
 
    background-size: cover; 
 
} 
 
.fancy-box { 
 
    border-width: 50px; 
 
    border-image: url('data:image/svg+xml,<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><polygon stroke="rgba(29, 30, 35, 0.9)" stroke-width="6" fill="rgba(44, 44, 48, 0.9)" points="5,5 255,5 295,45 295,295 45,295 5,255 5,5"/></svg>') 50 50 repeat; 
 
    background: rgba(44, 44, 48, 0.9); 
 
    background-clip: content-box; 
 
    /* other styling */ 
 
    color: #D7DBE1; 
 
    text-align: justify; 
 
    font-family: sans-serif; 
 
    width: 400px; 
 
    margin: 0 auto; 
 
}

<div class="fancy-box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec interdum velit. Morbi quis leo ac ipsum volutpat imperdiet. Sed feugiat posuere nisl sit amet luctus. 
 
</div>