Может кто нибудь подсказать, как можно сверстать элемент с вот таким закругленным углом?
Я пробовал использовать css свойство border-radius, пытаясь сверстать вот такой элемент:
но тогда угол элемента получался "слишком круглым". Возможно я не правильно подобрал проценты, если кто то может подсказать как сделать это с помощью данного свойства или другого css свойства, буду очень благодарен.
После того, как у меня не получилось сверстать такой элемент, я попытался сделать "треугольник" с помощью SVG:
У меня получилось сделать такой треугольник, с помощью двух прямых линий и одной кривой безье, но к сожалению залить его цветом не получается, так как свойство fill закрашивает не тело моего "треугольника", а область слева от кривой безье. У меня мало опыта в создании фигур с помощью SVG, возможно я что то делаю не так. Если кто нибудь подскажет как можно сделать это, без помощи растрового редактора, буду благодарен.
Не оно?
* {
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>
Собственно наука не сложная
Вы видите перед собой пять точек
Та точка которая регулирует закругление это: 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>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Пробую динамически добавлять данные в таблицуДанные mdata берутся из схемы mongoose
В общем, у меня есть input'ы в количестве 9-ти штукВ каждом из них при отправке должно быть конкретное число (здесь что-то в роде мини-игры, где...