Необходимо вырезать все углы блока с помощью CSS3. Как на картинке
2 ответа
Этого можно добиться с помощью абсолютного позиционирования прозрачного круглого элемента в углах с тенью по краям. Я использовал сочетание <div>
'ов с отключенной прокруткой, которые содержат <span>
'ы, тени, границы и псевдо-селекторы.
Вот основной HTML и CSS для начала:
a {display:inline-block; width:250px; height:100px; background:#ccc; border:2px solid #000; position:relative; margin:10px;}
a div {position: absolute; top: 0; overflow: hidden; width: 15px; height: 100%;}
a div:after {content:''; background:#000; width:2px; height:75px; position:absolute; top:12.5px;}
a div:first-of-type {left: -14px;}
a div:first-of-type:after {left:0;}
a div:last-of-type {right: -14px;}
a div:last-of-type:after {right:0;}
a span {display:block; width:30px; height:30px; background:transparent; position:absolute; bottom:-20px; right:-20px; border:2px solid #000; border-radius:25px; box-shadow:0 0 0 60px #ccc;}
a div:first-of-type span {left:-20px;}
a div:first-of-type span:first-child {top:-20px;}
a div:first-of-type span:last-child {bottom:-20px;}
a div:last-of-type span {right:-20px;}
a div:last-of-type span:first-child {top:-20px;}
a div:last-of-type span:last-child {bottom:-20px;}
<a href="">
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
</a>
Это перевод ответа «Inset border-radius with CSS3».
Я не думаю, что это было бы возможно, если углы должны быть прозрачными, однако, если фон известен, можно в каждом углу создать <div>
с закруглённой границей. Если у этих <div>
'ов цвет фона такой же как и у страницы, то это даст желаемый результат.
#box {
position: relative;
margin: 30px;
width: 200px;
height: 100px;
background: #ccc;
border: 1px solid #333;
}
.corner {
position: absolute;
height: 10px;
width: 10px;
border: 1px solid #333;
background-color: #fff;
}
.top-left {
top: -1px;
left: -1px;
border-radius: 0 0 100% 0;
border-width: 0 1px 1px 0;
}
.top-right {
top: -1px;
left: 190px;
border-radius: 0 0 0 100%;
border-width: 0 0 1px 1px;
}
.bottom-left {
top: 90px;
left: -1px;
border-radius: 0 100% 0 0;
border-width: 1px 1px 0 0;
}
.bottom-right {
top: 90px;
left: 190px;
border-radius: 100% 0 0 0;
border-width: 1px 0 0 1px;
}
<div id="box">
<div class="corner top-left"></div>
<div class="corner top-right"></div>
<div class="corner bottom-left"></div>
<div class="corner bottom-right"></div>
</div>
Это перевод ответа «Inset border-radius with CSS3».