Как вырезать угол блока с помощью CSS3?

#css3

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

Ответы

Ответ 1

Этого можно добиться с помощью абсолютного позиционирования прозрачного круглого
элемента в углах с тенью по краям. Я использовал сочетание 
'ов с отключенной прокруткой,
которые содержат 'ы, тени, границы и псевдо-селекторы.

Вот основной 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;}

    

        
        
    

    

        
        
    





Это перевод ответа «Inset border-radius with CSS3».


Ответ 2

Я не думаю, что это было бы возможно, если углы должны быть прозрачными, однако,
если фон известен, можно в каждом углу создать 
 с закруглённой границей. Если
у этих 
'ов цвет фона такой же как и у страницы, то это даст желаемый результат.



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

    

    

    

    






Это перевод ответа «Inset border-radius with CSS3».