Сделайте срезанные углы с бордюром

Я хочу сделать форму в html с обрезанными углами и границей вокруг формы.

Я могу сделать обрезанные фигуры без рамки следующим образом:

HTML:

<div class="cut-off"></div>

CSS:

 .cut-off{
   position:relative;
   top:400px;
   left:400px;
   height:155px;
   width:200px;
   background:red;
}
.cut-off:after{
   position:absolute;
   bottom:0px; right:-20px;
   content:".";
   text-indent:-999px; overflow:hidden;
   display:block;
   width:0px; height:0px;
   border-top: 20px solid green;
   border-right: 20px solid transparent;
}
.cut-off:before{
   position:absolute;
   top:0; right:-20px;
   content:"#";
   text-indent:-999px; overflow:hidden;
   display:block;
   background:blue;
   width:20px; height:135px;
}

Jfiddle здесь

Теперь мне нужна граница, которая идет вокруг фигуры. Как мне это сделать?

Я хочу форму, которая выглядит примерно так:

форма

Залито цветом.


html css css-shapes shape
person user1386906    schedule 30.12.2012    source источник
comment
хороший вопрос... будет сложно, и вам, вероятно, придется использовать преобразования css, чтобы сделать последнюю диагональную линию.. я сделал это много, хотя: jsfiddle.net/KR3XK/2   -  person d-_-b    schedule 30.12.2012
comment
А можешь показать фото как ты хочешь чтобы это выглядело?   -  person David says reinstate Monica    schedule 30.12.2012

Ответы (3)


arrow_upward
3
arrow_downward

Немного изменив вашу структуру html, я мог бы сделать это

<div class="cut-off"></div>
<div class="cut-off2"></div>​


.cut-off{
position: relative;
width: 300px;
height: 150px;
border-bottom: 80px red solid;
border-right: 80px transparent solid;
}

.cut-off2{
position: absolute;
z-index: -1;
top:0;
left: 0;
width: 305px;
height: 150px;
border-bottom: 82px blue solid;
border-right: 80px transparent solid;
}

p{
position: absolute;
left: 0;
bottom:-40px;

}

​

По сути, он добавляет еще один div под существующий. Для эффекта обрезания он играет с размерами границ.

РЕДАКТИРОВАТЬ: я также предоставил способ включения контента в эту область.

person menislici    schedule 30.12.2012

arrow_upward
0
arrow_downward

Попробуйте это:

<div class="cut-off">content</div>​​​​​​​​​​​
.cut-off{
   position:relative;
   height:155px;
   width:200px;
   background:red;
}
.cut-off:after{
   position:absolute;
   bottom:0px; right:-20px;
   content:".";
   text-indent:-999px; overflow:hidden;
   display:block;
   width:0px; height:0px;
   border-top: 20px solid green;
   border-right: 20px solid transparent;
}
.cut-off:before{
   position:absolute;
   top:0; right:-20px;
   content:"#";
   text-indent:-999px; overflow:hidden;
   display:block;
   background:blue;
   width:20px; height:135px;
}

Кстати, этот пример я нашел на следующей странице (и поэтому не утверждаю, что код мой): http://www.wahnbriefe.net/web-design/css-cut-off-уголки

person Voullage    schedule 30.12.2012
comment
Мне жаль, что это точно то же самое, что у меня уже было. Смотрите мою скрипку. Мне нужна эта форма с рамкой вокруг нее. - person user1386906; 31.12.2012
comment
Извинения. я этого не заметил - person Voullage; 31.12.2012

arrow_upward
-1
arrow_downward

Я не совсем уверен, что это то, что вы ищете, но я думаю, что вы могли бы использовать атрибут border-radius CCS3, чтобы добиться этого. Возможно, стоит взглянуть на него. Может быть, вы можете попробовать что-то вроде следующего:

<div class="cut-off">
    <p class="text">Simple text</p>
</div>​

 .cut-off{
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid #7A7764;
    border-radius: 0 75px 0 0;

}

.text {
    margin: 15px;
}

​

person Voullage    schedule 30.12.2012
comment
извините, но я не хочу закругленные углы. Я хочу, чтобы они были прямыми. Смотрите добавленную картинку. - person user1386906; 31.12.2012
comment
Я понимаю. Я думаю, что нашел что-то более актуальное. Взгляните на мой новый ответ (код слишком велик для комментария) - person Voullage; 31.12.2012