4

Необходимо вырезать все углы блока с помощью CSS3. Как на картинке alt text

TF03
  • 341

2 Answers2

4

Этого можно добиться с помощью абсолютного позиционирования прозрачного круглого элемента в углах с тенью по краям. Я использовал сочетание <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».

mymedia
  • 8,602
4

Я не думаю, что это было бы возможно, если углы должны быть прозрачными, однако, если фон известен, можно в каждом углу создать <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».

mymedia
  • 8,602