Question

如何在CSS3边框中实现这个特殊角落

enter image description here

这就是我现在所拥有的：

<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

看看这个答案： Div with cut out edges, 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;
}

CSS 3特色圆角边框

4 个答案: