Как сделать косой бордер и закругленные углы одновременно?

Question

Имеется такой блок и бордер с радиусом и наклонным правым бордером. Как это правильно можно реализовать?

Answer 1

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>

Answer 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>

БЛОГ НА HUSL

Как сделать косой бордер и закругленные углы одновременно?

Ответы (2 шт):