Как сверстать элемент с закругленным углом?

70
24 марта 2022, 00:40

Может кто нибудь подсказать, как можно сверстать элемент с вот таким закругленным углом?

Я пробовал использовать css свойство border-radius, пытаясь сверстать вот такой элемент:

но тогда угол элемента получался "слишком круглым". Возможно я не правильно подобрал проценты, если кто то может подсказать как сделать это с помощью данного свойства или другого css свойства, буду очень благодарен.

После того, как у меня не получилось сверстать такой элемент, я попытался сделать "треугольник" с помощью SVG:

У меня получилось сделать такой треугольник, с помощью двух прямых линий и одной кривой безье, но к сожалению залить его цветом не получается, так как свойство fill закрашивает не тело моего "треугольника", а область слева от кривой безье. У меня мало опыта в создании фигур с помощью SVG, возможно я что то делаю не так. Если кто нибудь подскажет как можно сделать это, без помощи растрового редактора, буду благодарен.

Answer 1

Не оно?

* { 
  margin: 0; 
  padding: 0; 
} 
 
.background { 
  z-index: -2; 
  position: relative; 
  overflow: hidden; 
  background: url('https://oboi.ws/filters/kelvin_25_8592_oboi_chernyj_fon_s_uzorami_i_zavitkami_1920x1200.jpg') no-repeat; 
  background-size: cover; 
} 
 
.black { 
  width: 100%; 
  height: 100px; 
  background: rgba(0, 0, 0, 0.6); 
} 
 
.white { 
  position: relative; 
  width: 100%; 
  height: 500px; 
  background: white; 
  border-radius: 0 250px 0 0 / 0 200px 0 0; 
} 
 
.white:before { 
  z-index: -1; 
  content: ""; 
  display: block; 
  position: absolute; 
  top: 0; 
  right: 0; 
  width: 50%; 
  height: 50%; 
  background: rgba(0, 0, 0, 0.6); 
} 
 
.wrp:before { 
  content: "Уголок"; 
  display: inline-block; 
  float: right; 
  width: 150px; 
  height: 200px; 
  color: white; 
  text-align: left; 
  line-height: 70px; 
  transform: rotate(38deg); 
  padding: 0 0 50px 20px; 
} 
 
p { 
  padding: 20px; 
  line-height: 1.2; 
} 
 
h1 { 
  padding: 20px; 
  color: white; 
}
<div class="background"> 
  <div class="black"> 
    <h1>Александр Сергеевич Пушкин</h1> 
  </div> 
  <div class="white"> 
    <div class="wrp"> 
      <p>Александр Пушкин родился 26 мая (6 июня) 1799 года в небогатой дворянской семье. Начальное образование, как это было принято у дворян, маленький Пушкин получил дома, его обучением занимались учителя и гувернеры, приглашаемые родителями из разных 
        стран Европы. При этом, несмотря на яркий ум, будущее светило русской поэзии никак нельзя было назвать прилежным учеником, преподаватели и родные отмечали в нем отсутствие усердия, но со временем мальчик увлекся чтением.</p> 
      <p>Уже в возрасте семи лет в Пушкине начал развиваться его творческий талант. Начитавшись Мольера, Лафонтена и Вольтера, он сочинял на французском языке маленькие комедии, басни и даже пытался написать поэму.</p> 
    </div> 
  </div> 
</div>

Answer 2

Собственно наука не сложная

Вы видите перед собой пять точек

Та точка которая регулирует закругление это: Q300,40 и меняя в большую или меньшую сторону увидите разницу

Остальные точки это координаты:

0,0 - левый верхний угол

300,0 - правый верхний

300,300 - нижний правый

0,0 - опять вернулись в лево вверх

и Q я подобрал опытным путём

<div style="width: 300px;"> 
  <svg viewBox="0 0 300 300"> 
   <path d="M0,0 300,0 300,300 Q300,40 0,0"></path> 
</svg> 
</div>

READ ALSO
Как в теле скрипта задать вывод шаблона ejs c элементом массива?

Как в теле скрипта задать вывод шаблона ejs c элементом массива?

Пробую динамически добавлять данные в таблицуДанные mdata берутся из схемы mongoose

129
Проверка input на введенное число

Проверка input на введенное число

У меня есть inputс типом number

82
Как проверить несколько input на введенные значения

Как проверить несколько input на введенные значения

В общем, у меня есть input'ы в количестве 9-ти штукВ каждом из них при отправке должно быть конкретное число (здесь что-то в роде мини-игры, где...

147