Мой Справочник | CSS | Декор
the-shapes-of-cssТреугольники из границ
<div class="triangle"></div>
.triangle {
height: 0px;
width: 0px;
border-width: 100px;
border-style: solid;
border-color: red yellow green blue;
}
<div class="triangle2"></div>
.triangle2 {
height: 0px;
width: 0px;
border-width: 100px;
border-style: solid;
border-color: transparent;
border-bottom-color: green;
}
Дуги
<div class="arc"></div>
.arc {
height: 100px;
width: 100px;
border: 30px solid blue;
border-right-color: transparent;
border-radius: 50%;
}
Орнаменты
<div class="ornament"></div>
.ornament {
height: 100px;
width: 500px;
background-image: url(../pict/orn.png);
background-repeat: repeat-x;
}
Исходная картинка:
padding-left + background-image
<h1 class="main-title">МИР БАБОЧЕК</h1>
.main-title {
height: 46px;
padding: 5px;
padding-left: 55px;
border: 2px solid #ccc;
background-image: url(../pict/MorphoGodarti.png);
background-repeat: no-repeat;
background-size: 55px;
}