CSS для угла скручивания наклона DIV

как достичь этого <div> от CSS:

enter image description here

Моя попытка:

div {
    height: 300px;
    background: red;
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    border-top: 80px solid white;
    border-right: 80px solid red;
    width: 0;
}

Я не могу изменить раздел наклона и заполнить белый внутри.

Ответы

Ответ 1

Моя попытка, опубликованная в комментариях (http://jsfiddle.net/8Zm96/):

div{
    width: 300px;
    height: 280px;
    background: #fff;
    border: solid 1px red;
    border-width: 0 1px 1px 1px;
    border-radius: 4px;
    margin-top: 40px;
    position: relative;
}

div:before{
    content: '';
    position: absolute;
    top: -20px;
    right: -1px;
    border: solid 1px red;
    border-width: 1px 1px 0 0;
    border-radius: 25px 4px 0 0;
    height: 24px;
    width: 250px;
    background: #fff;
}

div:after{
    content: '';    
    position: absolute;
    top: -20px;
    left: 2px;
    border: solid 1px red;
    border-width: 0 0 1px 0;
    border-radius: 0 0 20px 0;
    height: 20px;
    width: 55px;
    background: #fff;
}

Масштабирование закрывается, левый угол не подходит, и две полукрины фактически прогибаются друг мимо друга, но ни один из них не отображается при нормальном масштабировании. Это может быть проблемой для телефонов и экранов с высоким разрешением, которые могут отображать контент, увеличенный или более точно при нормальном масштабировании.

Ответ 2

Это моя лучшая попытка: http://jsfiddle.net/2y7TB/2/

Вот что я использовал: enter image description here

Я тестировал его только на Chrome, если вам это нравится, и вы хотите использовать кросс-браузер, пожалуйста, спросите:)

LE. Похоже, он также корректно отображает последние версии Firefox и Opera.

.tab:before {
    content: '';
    position: absolute;
    top: -23px;
    right: -1px;
    border-right:1px solid orange;
    border-left:1px solid orange;
    border-top:1px solid orange;
    background:white;
    width: 247px;
    height:24px;
    border-top-right-radius:5px;
    border-top-left-radius:25px;
}

.tab:after {
    content: '';
    position: absolute;
    top: -9px;
    left:1px;
    border-right:1px solid orange;
    border-bottom:1px solid orange;
    border-top:none;
    background:white;
    width: 53px;
    height:9px;
    border-bottom-right-radius:180px;
    box-shadow:3px 3px 0px 3px white;
}

Ответ 3

Вы можете сделать это с помощью css, но это много возится (= потенциальные проблемы с кроссбраузерами). Я установил скрипку о том, как это сделать с помощью CSS. Однако можно наблюдать некоторые нарушения на границе (особенно при масштабировании). Это просто эскиз, хотя и может быть оптимизирован, конечно.

Лучшим и кроссбраузерным надежным решением было бы просто использовать фоновое изображение в позиции, помеченной ниже. Вы можете использовать псевдоэлемент для этого, если хотите.

enter image description here

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

#head:before,#head:after {
    content:"";display:block;
    height:40px; 
    width:70px;
    border-left:2px solid orange;
    border-top:2px solid orange;
    transform:skewX(-45deg);
    border-top-left-radius:10px;
    position:relative;
    top:-2px;
    left:-40px;
}
#head:after {
    transform:rotate(180deg) skewX(-45deg);
    left:-180px;bottom:32px;top:auto;
    width:128px;
}

Ответ 4

возможно, этот код? jsFiddle, я не уверен, что вы хотите, , но он работает во всех браузерах.

HTML:

<div class="head">&nbsp;</div>
<div class="bdy"><div class="mask"></div>&nbsp;<br><br><br><br><br><br></div>

CSS

.head{    
    border-top: 1px solid #ffccff;
    border-left: 1px solid #ffccff;
    border-right: 1px solid #ffccff;
    border-radius: 40px 7px 0 0 ;
    margin-left: 20%;
}
.bdy{
    border-radius: 3px 0 3px 3px;
    border-top: none;
    border-left: 1px solid #ffccff;
    border-right: 1px solid #ffccff;
    border-bottom: 1px solid #ffccff;
}
.mask{

    top:-1px;
    left:1px;
    width:20%;
    height: 1px;
    background-color:#ffccff;
}