Bymega | Css3 kullanarak yazı üzerine eğik çizgi çizmek

Bazen yazıların üzerine eğik çizgi çizmemiz gerekebilir. Örneğin ürün satış sitesi hazırlarken kampanya yaptığınız bir ürünün fiyatında indirime gittiniz ve eski fiyatın üstünü eğik bir şekilde çizmek istiyorsunuz. Bu gibi durumlarda css3 ile gelen transform:rotate özelliği işimizi görecektir. Daha fazla uzatmaya gerek yok. Basit bir örnek ile konumuzu tamamlayalım.

CSS:

.strikethrough {
  position: relative;
}
.strikethrough:before {
  position: absolute;
  content: &quot;&quot;;
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: inherit;
 
  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}

HTML:

<span class='strikethrough'>Silinen yazı</span>

Github Gist Linki

Yorum yaz