CSS Elips veya Oval

qplot 1051 gün önce

596 defa görüntülendi ve 1 kişi tarafından değerlendirildi

Görselde mevcut olan işlemi nasıl yapabiliriz. css ile yapıldığını gördüm svg siz

Yapsa yapsa @tayfun yapar dediler.

css

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (3)

kaanekinci

1051 gün önce

İstediğini doğru anladıysam CSS before pseudo-element ile responsive yapıya uygun yapabilirsin.

<div class="ellipse">
  <span>We are good at what we do.</span>
</div>

  .ellipse {
    width: 70%;
    height: 200px;
    overflow:hidden;
    position:relative;
    display:flex;
    justify-content: center;
    align-items: center;
  }	
  .ellipse:before {
    content: "";
    display: block;
    width: 140%;
    height: 100%;
    background: #3490dc;
    border-radius: 100% / 50%;
    position: absolute;
    left: -20%;
    z-index: -1;
  }	
  .ellipse span {color:#fff;}

#005166

qplot

1051 gün önce

eyw lakin bunu öğrenmekte fayda var görsel güzellik katıyor sitelere bende bir kaç şey buldum lakin temelden kavrarsak epey işimize yarayacaktır :)

#005163

makifgokce

1051 gün önce

buradaki kodu biraz düzenledim
pek benzemedi gibi ama şöyle bişeyler çıktı :D

<style>
#ellipse {
	width: 600px;
	height: 350px;
	background: #3490dc;
	border-radius: 60% / 10%;
}	
</style>
<div id="ellipse"></div>

#005162