html - 边框中的 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 年使用图像也不是一个好主意，但你也可以尝试一下。

Answer 2

要实现这一点，您需要添加其他元素并将边框定位到恰到好处。

这是一种混乱的做事方式，但你可以实现它。

就个人而言，使用您刚刚放置在右上角的背景图像会更容易。

希望这可以帮助

这是一个 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;
}

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

看看这个答案： Div with cut out edges,border and transparent background

我的建议是使用 SVG 作为背景（因为它是矢量 gfx（保持清晰），您可以定义调整大小时它的某些部分应该如何表现）。见：http ://caniuse.com/#feat=svg-css