Как скосить угол блока div?

я следующий HTML-документ:Как скосить угол блока div?

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Тег DIV</title> 
     <style type="text/css"> 
      .block1 { 
       width: 200px; 
       background: #ccc; 
       padding: 5px; 
       padding-right: 20px; 
       border: solid 1px black; 
       float: left; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="block1">Text Content</div> 
    </body> 
</html>

Как описать стиль, чтобы получить следующий? enter image description here

источник

2013-05-25 sribin

вы можете генерировать треугольник, как сказал naivists, в противном случае используйте таблицу структур и изображений .. – Sakthivel

До CSS4 border-corner-shape собственности is in danger! и it's not implemented, Это может быть сделано с помощью CSS3 преобразования (чтобы сохранить border собственность бесплатно для дальнейшего использования):

HTML:

<div class="box"> 
    Text Content 
</div>

CSS:

.box { 
    width: 200px; 
    height: 35px; 
    line-height: 35px; 
    padding: 0 5px; 
    background-color: #ccc; 
    padding-right: 20px; 
    border: solid 1px black; 
    border-right: 0; 
    position: relative; 
} 

.box:after { 
    content: ""; 
    display: block; 
    background-color: #ccc; 
    border: solid 1px black; 
    border-left: 0; 
    width: 35px; 
    height: 35px; 
    position: absolute; 
    z-index: -1; 
    top: -1px; /* pull it up because of 1px border */ 
    right: -17.5px; /* 35px/2 */ 
    transform: skew(-45deg); 
    -o-transform: skew(-45deg); 
    -moz-transform: skew(-45deg); 
    -webkit-transform: skew(-45deg); 
}

Здесь JSBin Demo.

ПРИМЕЧАНИЕ: Там же в примере другого div выше, имеет class атрибут box2, который реализован без использования деклараций CSS3, которые вы могли бы рассмотреть его использование;)

источник

2013-05-25 11:11:47

** FYI: ** 'border-corner-shape', предложенный как свойство [' corner-shape'] (http://dev.w3.org/csswg/css-backgrounds-4/#corner-shaping) в [ CSS Backgrounds and Borders Module Level 4] (http://dev.w3.org/csswg/css-backgrounds-4). –

Скорее всего, это может быть сделано с использованием нежизнеспособного приграничного трюка. В сети есть некоторые «генераторы треугольников», например, this один

источник

2013-05-25 10:01:46 naivists

+1 Это лучший вариант. Вы можете использовать дополнительный «контур: сплошной 1px # 000;» для создания контура изображения. Даже вокруг треугольника. – Bart

Вот Solution.

CSS-и HTML:

ul { 
 
     position: relative; 
 
     overflow: hidden; 
 
     font: 14px Arial; 
 
     margin: 0; 
 
     padding: 0; 
 
     list-style: none; 
 
     text-align: center; 
 
    } 
 
    ul:before { 
 
     content: ""; 
 
     position: absolute; 
 
     z-index: -1; 
 
     left: 124px; 
 
     margin-left: -120px; 
 
     width: 0; 
 
     border-left: 0 solid transparent; 
 
     border-right: 230px solid transparent; 
 
     border-top: 179px solid #CCCCCC; 
 
    } 
 
    li { 
 
     height: 3.8em; 
 
     line-height: 3em; 
 
     position: relative; 
 
     margin-left: -562px; 
 
    } 
 
    li:after, 
 
    li:before { 
 
     content: ""; 
 
     display: block; 
 
     height: 0.4em; 
 
     background: #fff; 
 
     width: 100%; 
 
    }

<ul> 
 
    <li>Text Content</li> 
 
</ul>

Вы должны использовать border-width свойство получить желаемый результат.

Надеюсь, что это поможет.

источник

2013-05-25 10:38:59 Nitesh

Если я описываю документ так:

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Тег DIV</title> 
    <style type="text/css"> 
    .block1 { 
    width: 300px; 
    height: 0px; 
    border-style: solid; 
    border-width: 200px 200px 0 0; 
    border-color: #f200ff transparent transparent transparent; 
    } 
    </style> 
</head> 
<body> 
    <div class="block1">Text Content</div> 
</body> 
</html>

Я получаю почти то, что вам нужно, но я не понимаю, почему текст не на рисунке?

источник

2013-05-25 10:54:33 sribin

ответ

Смежные вопросы