Как выделить угол на CSS

Загнутый угол с помощью CSS

Отогнутые уголки в CSS

Сложенный угол HTML

Эффект CSS

Обратите внимание на бордовый уголок, он является ссылкой. Его можно положить на любой другой прямоугольник.

закруглённые углы
<style type="text/css">
.conteiner {
overflow: hidden;
position: relative;
border-radius: 0 0 0 20px;
background-color: #808080;
border: 1px solid #404951;
border-bottom: 4px solid #404951;
border-left: 4px solid #404951;
color: #FFF;
margin: 0 auto;
padding: 30px;
width: 520px;
}

#ugol {
display: block;
height: 100px;
position: absolute;
width: 100px;
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
top:-50px;
right:-50px;
background-color: #A00;
box-shadow: 0px 0px 50px #000 inset;
}
</style>

<!--[if IE]>
<style>
#ugol-ad {right: -30px; top: -70px;}
</style>
<![endif]-->

<div class="conteiner">
<a id="ugol" href="#" target="_blank">ссылка</a>
... текст текст текст ...
</div>

Заголовок

<style type="text/css">
.conteiner {
position: relative;
border-radius: 0 0 0 20px;
background-color: #808080;
border: 1px solid #404951;
border-bottom: 4px solid #404951;
color: #FFF;
margin: 0 auto;
padding: 30px;
width: 520px;
}

#ugol {
position: relative;
text-indent: 0px;
  margin-left: -41px; /* 30 padding conteiner + 1 border conteiner + 10 border before */
  margin-right: -41px;
  padding: 15px 30px;
  background: #e0c2b5;
  color: #404951;
}

#ugol:after{
  position: absolute;
  left: 0;
  bottom: -10px;
  content:'';
  border-top: 10px solid #555;
  border-left: 10px solid transparent;
}

#ugol:before{
  position: absolute;
  right: 0;
  bottom: -10px;
  content:'';
  border-top: 10px solid #555;
  border-right: 10px solid transparent;
}

</style>

<div class="conteiner">
<p id="ugol">Заголовок</p>
... текст текст текст ...
</div>


Заголовок

<style type="text/css">
.blok {
  position:relative;
}

.blok p {
  position:relative;
  background: #1f4037;
  width: 360px;
  z-index: 20;
  text-align:center;
  padding:35px 0;
  font:30px Georgia;
  color:#999;
}

.blok p:after, .blok p:before{
  position: absolute;
  top: -10px;
  content:'';
  border-bottom: 10px solid #000;
}

.blok p:after{
  left: 0;
  border-left: 20px solid transparent;
}

.blok p:before{
  right: 0;
  border-right: 20px solid transparent;
}

.blok div:empty {
  position:absolute;
  top: -10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color:#1f4037;
  z-index: 0;}
  
.blok div:nth-child(2) {left: -81px; }

.blok div:nth-child(3) {left: 340px; }

.blok p, .blok div:empty {
  box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55)}

</style>

<div class="blok">
<p>Заголовок</p><div></div><div></div>
</div>

В статье использованы материалы:
  1. http://www.webdesignshock.com/css3-box-shadow/
  2. http://www.impressivewebs.com/page-corner-ads-css3/
в f t
наверх ↑

6 комментариев:

Даниил Юрьевич
Очень интересное решение =), надо будет реализовать где нибудь у себя в блоге..Спасибо автору и вам NMitra =)
NMitra
Рада быть полезной)
Nortt
А как картинку в ставить в этот угол?
NMitra
Вместо слова "ссылка" добавьте код изображения. Стили нужно подгонять. Например, картинка из примера разработчика:

<a id="ugol" href="#" target="_blank"><img src="http://www.impressivewebs.com/demo-files/page-corner/page-corner.jpg" alt="Click the Corner" title="Click the Corner!" width="90" height="90" /></a>
Юрій Пелих
Подскажите пожалуйста, как совместить два верхних примера? Чтобы в одного блока были загнуты и верхний, и нижний уголок.
NMitra
Нужны вложенные элементы, посмотрите, примерно как тут http://www.webdesignshock.com/css3-box-shadow/