CSS 3 特色圓角邊框

Question

我怎樣才能用 CSS3 在我的邊框中實現這個特殊的角落

這是我現在得到的：

http://jsfiddle.net/hashie5/nDv5k/

<aside>
<h2>Product in de kijker</h2>
<h3>Mobiele telefonie</h3>
<p>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.</p>
<a href="#" class="btn btn-runa">Ga verder</a>

    aside {
    border: 1px solid #CCCC00;
    border-radius: 10px;
    padding: 5px 20px 20px 20px;
    width: 290px;
    margin: 50px;
}
body {
    font-family:"Trebuchet MS";
    color: #333333;
    background-color: #FFFFFF;
    font-size: 14px;
    line-height: 150%;
}
h1 {
    font-size: 30px;
    color: #1F668C;
    line-height: 120%;
    font-weight: normal;
}
h2 {
    font-size: 22px;
    color: #CCCC00;
    line-height: 120%;
    font-weight: normal;
}
h3 {
    font-size: 22px;
    color: #1E678E;
    line-height: 120%;
    font-weight: normal;
}
h4 {
    font-size: 20px;
    color: #1E668C;
    line-height: 120%;
    font-weight: normal;
}
h5 {
    font-size: 14px;
    color: #CCCC00;
    line-height: 120%;
    font-weight: bold;
}
.btn-runa {
    background: none;
    background-color: #CCCC00;
    color: #FFFFFF;
    text-shadow: none;
}

Answer 1

請參考這個[jsFidde][1][1]：http://jsfiddle.net/nDv5k/18/

html

<aside>
    <div class="top">
    <h2>Product in de kijker</h2>
    </div>
    <div class="middle">
    <h3>Mobiele telefonie</h3>
    <p>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.</p>
    <a href="#" class="btn btn-runa">Ga verder</a>
    </div>
    <div class="upper-left"></div>
    <div class="bottom-left"></div>
    <div class="bottom-right"></div>
</aside>

CSS

aside {
    width: 290px;
    margin: 50px;
    position:relative;
}
.top{
    padding: 5px 20px 20px 20px;
    border-top: 1px solid #CCCC00;
    border-left: 1px solid #CCCC00;
    border-top-left-radius: 10px;
    width: 224px;
    height:75px;
    top: -1px;
}
.middle{
    padding: 5px 20px 20px 20px;
    margin-top:-19px;
    border-bottom: 1px solid #CCCC00;
    border-left: 1px solid #CCCC00;
    border-right: 1px solid #CCCC00;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    width: 289px;
    
}
.upper-left {
    border-right: 1px solid #CCCC00;
    border-top: 1px solid #CCCC00;
    border-top-right-radius: 10px;
    width:15px;
    height:25px;
    top: 0px;
    left:262px;
    position:absolute;
    z-index:10;
}
.bottom-left {
    border-left: 1px solid #CCCC00;
    border-bottom: 1px solid #CCCC00;
    border-bottom-left-radius: 10px;
    width:20px;
    height:25px;
    top: 25px;
    left:277px;
    position:absolute;
    z-index:10;
    background:#fff;
}
.bottom-right {
    border-right: 1px solid #CCCC00;
    border-top: 1px solid #CCCC00;
    border-top-right-radius: 10px;
    width:35px;
    height:31px;
    top: 50px;
    left:295px;
    position:absolute;
    z-index:10;
    background:#fff;
}

這不是一種好的編碼方式，但我不知道另一種方式

在 2013 年使用 image 也不是一個好主意，但你也可以嘗試一下..

Answer 2

看看這個答案： Div with cut edge, border and transparent background

我的建議是將 SVG 作為背景（因為它是一個矢量 gfx（保持清晰），您可以定義在調整大小時它的部分應該如何表現）。 見： http : //caniuse.com/#feat=svg-css

Answer 3

你選擇你想要彎曲的角落。 : 前面有很多 css，但它會讓你深入了解你可以做什么。

css：

aside {
    border: 1px solid #CCCC00;
    border-radius: 10px;
    padding: 5px 20px 20px 20px;
    width: 290px;
    margin: 50px;
    position:relative;
}
.upper-left {
    border-right: 1px solid #CCCC00;
    border-top: 1px solid #CCCC00;
    border-top-right-radius: 10px;
    width:15px;
    height:25px;
    top: -1px;
    right:50px;
    position:absolute;
    z-index:10;
}
.bottom-left {
    border-left: 1px solid #CCCC00;
    border-bottom: 1px solid #CCCC00;
    border-bottom-left-radius: 10px;
    width:20px;
    height:25px;
    top: 25px;
    right:30px;
    position:absolute;
    z-index:10;
    background:#fff;
}
.bottom-right {
    border-right: 1px solid #CCCC00;
    border-top: 1px solid #CCCC00;
    border-top-right-radius: 10px;
    width:30px;
    height:25px;
    top: 50px;
    right:-1px;
    position:absolute;
    z-index:10;
    background:#fff;
}

html：

<aside>
    <h2>Product in de kijker</h2>
    <h3>Mobiele telefonie</h3>
    <p>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.</p>
    <a href="#" class="btn btn-runa">Ga verder</a>
    <div class="upper-left"></div>
    <div class="bottom-left"></div>
    <div class="bottom-right"></div>
</aside>

Answer 4

要實現這一點，您需要添加附加元素並將邊框定位得恰到好處。

這是一種凌亂的做事方式，但你可以實現它。

就個人而言，使用僅位於右上角的背景圖像會更容易。

希望這可以幫助

這是一個 jsFidde： http : //jsfiddle.net/davidja/nDv5k/19/

<div class="hidelines"></div>
<div class="corner3"></div>
<div class="corner1"></div>
<div class="corner2"></div>


aside {
    position:relative; /* add relative positioning.
    border: 1px solid #CCCC00;
    border-radius: 10px;
    padding: 5px 20px 20px 20px;
    width: 290px;
    margin: 50px;
}

.corner1, .corner2, .corner3 {
    position:absolute;
    width: 10px;
    height: 10px;
}
.corner3 {
    height: 34px;
    width: 77px;
    right: 10px;
    top: 10px;
    background-color: #fff;
    border-left: 1px solid #CCCC00;
    border-bottom: 1px solid #CCCC00;
    border-radius: 0px 0px 0px 10px;
}
.corner1 {
    border-top: 1px solid #CCCC00;
    border-right: 1px solid #CCCC00;
    border-radius: 0px 10px 0px 00px;
    right: 87px;
    background: white;
    top: -1px;
}
.corner2 {
    border-top: 1px solid #CCCC00;
    border-right: 1px solid #CCCC00;
    border-radius: 0px 10px 0px 00px;
    right: -1px;
    background: white;
    top: 44px;
}
.hidelines {
    position: absolute;
    right: -1px;
    top: -1px;
    height: 56px;
    width: 98px;
    background-color: white;
}