Soru Sınır yarıçapı eğrisimi nasıl dışarı çıkarabilirim?


Bir div’in aşağıdaki çizim gibi kenarlıklara sahip olmasını sağlamaya çalışıyorum:

enter image description here

Denediğim şey bu:

div {
    height: 100px;
    width: 100px;
    border-bottom-right-radius:100px 10px;
    border:1px solid #000;
}
<div></div>

Bunu başarmanın bir yolu nedir?


22
2018-05-08 01:28


Menşei


Bu sadece sınır yarıçapı değil, ek bir işaretlemeye ihtiyaç duyacaktır. - Colin Schoen


Cevaplar:


kullanma :before ve :after

Example

Üst sınır, :before:

  • Yüksekliği, sınır yarıçapı ile aynıdır

  • Bu hemen dışında ile konumlandırılmış top ve sol sınır çizgileri sayesinde left

  • Genişliği ile hesaplanır calc Eğrinin üstünü hassas bir şekilde hizalamak için

  • Eğri ile rafine edilebilir transform: skewX(-60deg)

Sol kenarlık, :after:

  • % 100 yükseklik eksi, daha önce olanın yüksekliği ve sınırın kalınlığı ile verilir. calc

Örnekler

Sayı 1 - biraz sivri

div {
  border-bottom-right-radius: 100px 20px;
  border: 1px solid #000;
  border-top: none;
  height: 500px;
  width: 200px;
  position: relative;
  border-left: none;
}
div:before,
div:after {
  content: '';
  display: block;
  position: absolute;
  left: -1px;
}
div:before {
  height: 20px;
  width: 100%;
  width: calc(100% + 1px);
  border-bottom-right-radius: 100px 20px;
  border-bottom: 1px solid #000;
  border-right: solid 1px #000;
  top: -1px;
}
div:after {
  height: calc(100% - 18px);
  border-left: 1px solid #000;
  top: 19px;
}
<div></div>

Sayı 2 - eğri ile yumuşatılmış nokta

div {
  border-bottom-right-radius: 100px 20px;
  border: 1px solid #000;
  border-top: none;
  height: 200px;
  width: 200px;
  position: relative;
  border-left: none;
}
div:before,
div:after {
  content: '';
  display: block;
  position: absolute;
  left: -1px;
}
div:before {
  height: 20px;
  width: 100%;
  width: calc(100% - 36px);
  border-bottom-right-radius: 100px 20px;
  border-bottom: 1px solid #000;
  border-right: solid 2px #000;
  top: 0px;
  left: 17px;
  transform: skewX(-60deg);
}
div:after {
  height: calc(100% - 19px);
  border-left: 1px solid #000;
  top: 20px;
}
<div></div>


27
2018-05-08 02:15



Teşekkürler, bu harika, ama neden üst sınır resimden daha keskin ve daha keskin görünüyor. - user3741635
@ user3741635 - sınırları CSS'de çizilen yol nedeniyle. Yanıtıma yeni eklediğim örnek numarası 2'ye göz atın. transform: skewX - misterManSam
Sadece bir soru daha, örneğin çizimin rengini şeffaftan kırmızıya nasıl değiştirebilirim. - user3741635


DIV'leri kullanarak yapabilirdim, ancak bunu yapmak için daha zarif bir yol olduğuna eminim:

    #container {
       border:none;   
       height:100px;
       border-right: solid 1px #000;
    }
    
    #square_top {
       border-bottom-right-radius:100px 10px;
       border:none;   
       border-bottom: solid 1px #000;
       height:10px;
    }
    
    #square_bottom {
       border-bottom-right-radius:100px 10px;
       border:none;   
       border-bottom: solid 1px #000;
       border-right:solid 1px #000;
       border-left:solid 1px #000;
       height:10px;
    }
    
    #square {
       height: 90px;
       border-left:solid 1px #000;
    }
    <div id="container">
       <div id="square_top"></div>
       <div id="square">TEXT HERE</div>
    </div>   
    <div id="square_bottom"></div>


7
2018-05-08 01:57





CSS bunu yapabilmesine rağmen, daha fazla esneklik sağlayan başka bir yaklaşım vardır: SVG

Bu yaklaşım şunları sağlar:

  • Şekil, boyutlarını içeriğin boyutuna göre ekler
  • duyarlı
  • Her türlü arka plana izin verir (resim, degradeler, yarı saydam renkler ...)
  • Şekil için her türlü dolguya izin verir (resim, degradeler, yarı saydam renkler ...)
  • Üst ve alt eğrileri kontrol etmek daha kolay:

body {background: url('http://lorempixel.com/output/people-q-g-640-480-9.jpg');background-size: cover;}
div {
  position: relative;
  width: 30%;
  padding: 5%;
  color: #fff;
  text-align: center;
}
svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
}
<div>
  <p>Some text</p>
  <p>Some text</p>
  <p>Some text</p>
  <p>Some text</p>
  <p>Some text</p>
  <p>Some text</p>
  <p>Some text</p>
  <p>Some text</p>
  <p>Some text</p>
  <svg viewbox="0 0 50 100" preserveAspectRatio="none">
    <path d="M1 9 C49 10 49 1 49 1 V90 C49 91 49 99 1 99z"  stroke-width="0.5" stroke="#000" fill-opacity="0.5" />
  </svg>
</div>


4
2018-05-08 11:46



Bunu görene kadar bunu ekleyecektim. insanlar da SVG kullanmalı - Max Payne
En boy oranını koruduğu için şekil değişir. Bu güzel, ancak sol ve sağ vuruşların strok genişliğinin değişmesine neden oluyor. Tat üstesinden gelmenin bir yolu var mı? - Max Payne
@TimKrul Sormadan önce farkında değildim ama var vector-effect="non-scaling-stroke"  strokun genişliğini sabit tutmayı sağlayan özellik. Ancak IE tarafından desteklenmiyor gibi görünüyor - web-tiki
Evet bu işi yapar! :) - Max Payne