Html CSS 3特殊功能边框中的圆角

我如何才能认识到我与CSS3之间的这个特殊的角落

这就是我现在得到的：

看看这个答案：

我的建议是使用SVG作为背景（因为它是一个矢量gfx（保持清晰），您可以定义在调整大小时它的部分行为）。

---

请参见：

选择要弯曲的拐角：前面有很多css，但它会让你深入了解你能做什么

css:

html:

---

要实现这一点，您需要添加额外的元素并正确定位边框

这是一种混乱的做事方式，但你可以做到

就个人而言，使用背景图像会更容易，你只需将其放置在右上角

希望这有帮助

下面是一个JSFIDE：

旁白{
位置：相对；/*添加相对位置。
边框：1px实心#CC00；
边界半径：10px；
填充：5px20px20px20px；
宽度：290px；
利润率：50像素；
}
.corner1、.corner2、.corner3{
位置：绝对位置；
宽度：10px；
高度：10px；
}
.角落3{
高度：34px；
宽度：77px；
右：10px；
顶部：10px；
背景色：#fff；
左边框：1px实心#CC00；
边框底部：1px实心#CC00；
边界半径：0px 0px 0px 10px；
}
.角落1{
边框顶部：1px实心#CC00；
右边框：1px实心#CC00；
边界半径：0px 10px 0px 00px；
右：87px；
背景：白色；
顶部：-1px；
}
.角落2{
边框顶部：1px实心#CC00；
右边框：1px实心#CC00；
边界半径：0px 10px 0px 00px；
右：-1px；
背景：白色；
顶部：44px；
}
Hideline先生{
位置：绝对位置；
右：-1px；
顶部：-1px；
高度：56px；
宽度：98px；
背景色：白色；
}

请参考此[jsFidde][1][1]：http://jsfiddle.net/nDv5k/18/

Html

这不是一种好的编码方式，但我不知道另一种方式

在2013年，使用图像也不是一个好主意，但你也可以尝试一下

<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;
}

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;
}

<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>

<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;
}

<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>

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;
}