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

изучить этот ответ: 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; 
}