Углы для контейнера

Рейтинг: 1Ответов: 1Опубликовано: 19.03.2023

Очень хочу сделать вот такую рамку для своего контейнера но уже 4 день ничего не выходит. Вот мой код что я уже смог написать border: 5px solid #FFCF6E; clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px); border: 5px solid; border-image-slice: 1;

border-image-source: linear-gradient(to bottom, #7C5C28 0%, #7C5C28 50%, rgba(124,92,40,0) 100%); padding: 1em 2em; https://i.sstatic.net/YX2zV.png

css3
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Используйте псевдоэлементы, как фон, применив к ним clip-path (Вы можете изменить размер, ухватив блок за правый нижний угол):

/* For example only --> */ body{margin:0;min-height:100vh;display:flex;flex-flow:column nowrap;justify-content:space-around;align-items:center;background-color:#000;background-image:url('https://i.sstatic.net/m9NKc.png'),radial-gradient(#fff8,#000f);background-position:0 0;background-repeat:no-repeat;background-size:auto}

.wrap {
  position: relative;
  width: 400px; height: 160px;
  font: bold 16px/1.3em sans-serif;
  padding: 1em;
  color: #f1d476;
  box-sizing: border-box;
  /* For example only */
  overflow: hidden;
  resize: both;
}
.wrap::before,
.wrap::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%; z-index: -1;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
}
.wrap::before {
  background-image: linear-gradient(#745225, #281d0b);
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
}
.wrap::after {
  background-image: linear-gradient(#4c300e, #090601);
  clip-path: polygon(14px 2px, calc(100% - 14px) 2px, calc(100% - 2px) 14px, calc(100% - 2px) calc(100% - 14px), calc(100% - 14px) calc(100% - 2px), 14px calc(100% - 2px), 2px calc(100% - 14px), 2px 14px);
}
<div class="wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat provident iure quam ab rem, quod voluptate eligendi nostrum sequi molestiae harum. Nam ducimus quas iusto non assumenda necessitatibus quo deserunt.</div>