Имеется такой блок и бордер с радиусом и наклонным правым бордером. Как это правильно можно реализовать?
2 ответа
Такая форма - это "классика" CSS. Делается элементарно, с помощью псевдоэлементов, свойства transform: skew()
и border-radius
:
.skew {
position: relative;
/* Оригинальные размеры */
width: 510px; /* 710px */
height: 180px; /* 351px */
}
.skew::before,
.skew::after {
content: "";
position: absolute;
height: 100%; width: 55%;
box-sizing: border-box;
border: 2px solid #deeaff;
background-color: #fff;
}
.skew::before {
left: 0;
border-right: none;
border-radius: 10px 0 0 10px;
}
.skew::after {
right: -2px;
border-left: none;
border-radius: 0 15px 8px 0;
transform-origin: top right;
transform: skewx(-15.6deg);
}
<div class="skew"></div>
-
1@Sevastopol: не-не, это точно я)) Градиентами можно сделать, но там возникает проблема с адаптивностью. Я сразу проверил этот вариант.– UModeL12 мая 2021 в 0:45
div{
border:4px solid #aaa;
border-right:0;
border-radius:10px 0 0 10px;
width:300px;
height:100px;
position:relative;
box-sizing:border-box;
}
div:after{
content:"";
border:4px solid #aaa;
border-left:0;
border-radius:0 10px 10px 0;
position:absolute;
top:-4px;
bottom:-4px;
right:-40px;
transform:skew(-10deg);
width:100px;
}
<div></div>