Thursday, May 11, 2017

Yorum yok

css üçgen div'ler

AÇIKLAMA ALANI - DIV KULLANIMI

üçgen div

CSS ile hazırlanmış 4 kenarın belirli bir açı ve konuma göre ayarlanarak oluşturduğu çok şık ve kullaşlı bir div. Farklı yön gösteren üçgen ok divler 4 farklı konuya ayarlanabiliyor. CSS kısmını kendinize göre ayarlayarak divlerden istediğinizi seçip kullana bilirsiniz. HTML kısmı olarak <Div id = "divismi </ div> işaret alanını seçip istediğiniz sayfada konu altı açıklama alanı olarakta kullanabilirsiniz.
divler

CSS kısmı
.yukaridiv, .asagidiv, .soldiv, .sagdiv{ width:600px;
min-height:40px; /*min height of DIV should be set to at least 2x the width of the arrow*/
background: black;
color:white;
padding:5px;
position:relative;
word-wrap:break-word;
-moz-border-radius:5px; /*add some nice CSS3 round corners*/
-webkit-border-radius:5px;
border-radius:5px;
margin-bottom:2em;
}
.yukaridiv:after{ /*arrow added to uparrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:-20px; /*should be set to -border-width x 2 */
left:30px;
width:0;
height:0;
border-color: transparent transparent black transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}
.asagidiv:after{ /*arrow added to downarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:100%; /*should be set to 100% */
left:30px;
width:0;
height:0;
border-color: black transparent transparent transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}
.soldiv:after{ /*arrow added to leftarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:10px;
left:-20px; /*should be set to -border-width x 2 */
width:0;
height:0;
border-color: transparent black transparent transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}
.sagdiv:after{ /*arrow added to rightarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:10px;
left:100%; /*should be set to 100% */
width:0;
height:0;
border-color: transparent transparent transparent black; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}
Renk boyut ve üçken gösterge yapısını css kısmından renklendirdiğim alanlarda değişiklik yaparak, kendi tasarım renk ve hızasına getirebilirsiniz.

İşaretleme kısmı

<div class="yukaridiv">
This is a test
</div>
<div class="asagidiv">
This is a test
</div>
<div class="soldiv">
This is a test
</div>
<div class="sagdiv">
This is a test
</div>
Wapper(sayfa) boyutumun genişliğinden dolayı div uzunluğu ve görünümü tam çıkmıyor, bu sizin sayfanızın boyutuna göre değişir ve ayarlana bilir. 

0 yorum:

Post a Comment