Css - Закръглени ъгли под Css - за начинаещи

[Sonik_Blast]

Css - Закръглени ъгли под Css - за начинаещи

 

Има и други начини да създадете закръглени ъгли чрез css,но този на мен ми се вижда най-елегантен и затова ще ви го предложа.Ще направим всичко на няколко стъпки…и за да не ви бавя повече да започваме:

 

1 -Създайте четири картинки на ъгли като моите които може да намерите тук

2-Създаваме частта,която ще се намира в страницата ви,а кода изглежда ето така:

<div class="roundcont">
<div class="roundtop">
 <img src="tl.gif" alt="" width="15" height="15" class="corner" style="display: none" />
  </div>
  <p>това е мястото където може да пишете текста,които ще се намира м/у тях.</p>
  <div class="roundbottom">
 <img src="bl.gif" alt="" width="15" height="15" class="corner" style="display: none" />
  </div>
</div>

Както забелязвате има 3 div-a 1-които държи горната част с ъглите,2-които държи долната част с ъглите и 3-които държи цялата кутия,като м/у <p> и </p> пишете каквото искате.

 

3-Създаваме css частта,която ще изглежда така:

.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}

.roundcont p {
margin: 0 10px;
}

.roundtop { 
background: url(tr.gif) no-repeat top right; 
}

.roundbottom {
background: url(br.gif) no-repeat top right; 
}

img.corner {
  width: 15px;
  height: 15px;
  border: none;
  display: block !important;
}

Внимавате само имената на картинките и цвета да съвпадат с вашите изисквания!

 

Автор: Sonik_Blast, webleit.com