Загнутый угол с помощью 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 {
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>
В статье использованы материалы:
6 комментариев:
<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>