Трапециевидная форма с угловой верхней и правой стороной - PullRequest
Новая
       146

Трапециевидная форма с угловой верхней и правой стороной

2 голосов
/ 18 сентября 2011

Это изогнутый элемент в основном:

curved div

Так что можно сделать только с CSS и без изображений?

Ответы [ 3 ]

3 голосов
/ 18 сентября 2011

Ну ... Я был самым большим скептиком этой формы, но кажется, что это возможно. O_o

Демо

HTML 

<div class="shape one"></div>
<div class="shape two"></div>
<div class="shape three"></div>

CSS 

.shape
{
    background:red;
    float:left;
}

.one
{
    border-width:0px;
    border-bottom:10px solid red;
    border-left:200px solid #fff;
    width:0px;
}

.two
{
    width:200px;
    height:40px;
    clear:left;
}

.three
{
    border-width:0px;
    border-top:50px solid red;
    border-right:10px solid #fff;
    width:0px;
    margin-top:-10px;
}
1 голос
/ 13 марта 2013

Метод border выглядит зернистым в протестированных мною браузерах. Вот метод, использующий псевдоэлементы ::before и ::after и CSS transform: skew(), который выглядит более плавным. Вы можете настроить углы по мере необходимости. При этом используется только один <div>.

Демо: jsFiddle

Выход:

output

HTML: 

<div class="quadrilateral"></div>

CSS: 

.quadrilateral {
    background-color: red;
    height: 50px;
    margin: 50px;
    position: relative;
    width: 300px;
}
.quadrilateral::before {
    background-color: red;
    content: '';
    display: inline-block;
    height: 61px;
    position: absolute;
    right: -3px;
    top: -11px;
    transform:             skewX( -5deg ); 
        -ms-transform:     skewX( -5deg ); 
        -webkit-transform: skewX( -5deg ); 
        -o-transform:      skewX( -5deg ); 
        -moz-transform:    skewX( -5deg ); 
    width: 10px;
}
.quadrilateral::after {
    background-color: red;
    content: '';
    display: inline-block;
    height: 15px;
    position: absolute;
    top: -6px;
    transform:             skewY( -2deg ); 
        -ms-transform:     skewY( -2deg ); 
        -webkit-transform: skewY( -2deg ); 
        -o-transform:      skewY( -2deg ); 
        -moz-transform:    skewY( -2deg ); 
    width: 300px;
}
0 голосов
/ 18 сентября 2011

Вместо CSS рассмотрите возможность использования SVG.Он поддерживается во всех основных браузерах, и эта форма будет очень мала в формате SVG.Он также будет в вашем DOM-дереве, чтобы вы могли связывать с ним события.

...