2

Нашёл на stackoverflow этот вопрос.Так как ответа достойного там нету но автора очевидно устроило и решением он выбрал ответ...

Решил для себя попробовать реализовать, вот что вышло :

html,
body {
  font-size: 16px;
  background: inherit;
}

.items {
  width: 768px;
  height: 550px;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.item:nth-of-type(1),
.item:nth-of-type(3) {
  justify-content: center;
}

.item:nth-of-type(1) .item-outer,
.item:nth-of-type(3) .item-outer {
  width: 100%;
  margin-top: 30px;
}

.item:nth-of-type(2) {
  justify-content: space-between;
}

.item:nth-of-type(2) .item-outer {
  width: 100%;
  margin: 30px 0;
}

.center {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.itemed:nth-of-type(1) {
  transform: rotate(-17deg)translate(-50%, -50%);
}

.itemed:nth-of-type(2) {
  transform: rotate(-10deg)translate(-50%, -50%);
}

.itemed:nth-of-type(3) {
  transform: rotate(-3deg)translate(-50%, -50%);
}

.itemed:nth-of-type(4) {
  transform: rotate(3deg)translate(-50%, -50%);
}

.itemed:nth-of-type(5) {
  transform: rotate(10deg)translate(-50%, -50%);
}

.itemed:nth-of-type(6) {
  transform: rotate(17deg)translate(-50%, -50%);
}

.itemed {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: -25% 150% 0;
  box-sizing: padding-box;
  border: 4px dashed red;
  background: #fff;
  transition: 0.5s;
  padding: 4px;
}

.itemed:hover {
  /* здесь на css или на js сделаю подчёркивание нужного заголовка*/
}
<div class="items">
  <div class="item">
    <div class="item-outer">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae eos minima quae necessitatibus hic, ratione quis voluptas atque eligendi beatae.
    </div>
    <div class="item-outer">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit ex ea sequi tempore ad atque porro ratione, id provident fuga!
    </div>
  </div>
  <div class="item">
    <div class="item-outer">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae porro libero ex eos repellendus nisi eum sunt aliquid quod error.
    </div>
    <div class="item-outer">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia ipsa incidunt qui animi eveniet, hic consectetur dolor sapiente sit sunt.
    </div>
  </div>
  <div class="item">
    <div class="item-outer">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae porro libero ex eos repellendus nisi eum sunt aliquid quod error.
    </div>
    <div class="item-outer">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia ipsa incidunt qui animi eveniet, hic consectetur dolor sapiente sit sunt.
    </div>
  </div>
  <div class="center">
    <div class="itemed"></div>
    <div class="itemed"></div>
    <div class="itemed"></div>
    <div class="itemed"></div>
    <div class="itemed"></div>
    <div class="itemed"></div>
  </div>
</div>

Вопрос в том, каким образом реализовать именно такой бардюр как на скриншоте ?

То есть зубчиками ...вся остальная реализация не интересует

Пробовал box-sizing:border-box/content-box/padding-box что то я упустил из вида - забыл

введите сюда описание изображения

8
  • Хоть первый вариант решения - логичный, но не адаптивный, а это проблема. Уже давненько, практически вся верстка адаптивная. Для мобильных устройств..., тут надо будет подумать и иначе сделать.
    – user262779
    Commented 20 окт. 2018 в 8:34
  • @VladSpirin адаптировать не проблема , я вот ТАКОЙвариант придумал но вот это точно шляпа Commented 20 окт. 2018 в 8:36
  • Там в первом вопросе, фактически было два вопроса, вы похоже сосредоточились на втором, понял. Решение достойное, оптимальное я б так сказал. Можно еще с svg попробовать
    – user262779
    Commented 20 окт. 2018 в 8:39
  • 2
    Никита вы выбрали один из правильных путей оттачивания навыков самостоятельно. На SO тонна задач. Буду поглядывать за вашими успехами :)
    – user262779
    Commented 20 окт. 2018 в 9:09
  • 1
    Рассматривали такой вариант? css-tricks.com/understanding-border-image Commented 21 окт. 2018 в 11:46

2 ответа 2

5

Единственное что пришло в голову это прозрачная PNG с таким бордюром

preview

.center {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.itemed:nth-of-type(1) {
  transform: rotate(-17deg)translate(-50%, -50%);
}

.itemed:nth-of-type(2) {
  transform: rotate(-10deg)translate(-50%, -50%);
}

.itemed:nth-of-type(3) {
  transform: rotate(-3deg)translate(-50%, -50%);
}

.itemed:nth-of-type(4) {
  transform: rotate(3deg)translate(-50%, -50%);
}

.itemed:nth-of-type(5) {
  transform: rotate(10deg)translate(-50%, -50%);
}

.itemed:nth-of-type(6) {
  transform: rotate(17deg)translate(-50%, -50%);
}

.itemed {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: -25% 150% 0;
  box-sizing: padding-box;
  transition: 0.5s;
  padding: 6px;
}

.itemed:nth-of-type(1),
.itemed:nth-of-type(3),
.itemed:nth-of-type(5) {
  background: url(https://openclipart.org/image/800px/svg_to_png/27666/kuhlo-Stamp-frame.png);
  background-color: #fff;
  background-size: 100% 100%;
}

.itemed:nth-of-type(2),
.itemed:nth-of-type(4),
.itemed:nth-of-type(6) {
  background-image: url(https://openclipart.org/image/800px/svg_to_png/27666/kuhlo-Stamp-frame.png);
  background-size: 100% 100%;
  background-color: #fbfbfb;
}
<div class="center">
  <div class="itemed"></div>
  <div class="itemed"></div>
  <div class="itemed"></div>
  <div class="itemed"></div>
  <div class="itemed"></div>
  <div class="itemed"></div>
</div>

3
  • 1
    @VladSpirin спс за плюсик Commented 20 окт. 2018 в 8:55
  • бог трансформов чтоли O.o ???
    – Randall
    Commented 20 окт. 2018 в 9:59
  • там нету транформов ... а в самом премере выше конечно с трансормами Commented 20 окт. 2018 в 10:12
1

Второй вариант как сделать зубчиками бордюр

минусы: просто много css и если таких блоков как в примере будет 3-7 то css значительно увеличится, тяжело поддерживать и адаптировать

Вариант с PNG на фоне удобнее и поддерживать лучше

Здесь в примере repeating-linear-gradient расположены 90 градусов друг к другу и сверху перекрыто псевдо элементом

.item {
  width: 200px;
  height: 200px;
}

.item {
  background: repeating-linear-gradient(transparent 3%, #000 3%, #000 6%, transparent 6%, transparent 9%), repeating-linear-gradient(90deg, #fff 3%, #000 3%, #000 6%, #fff 6%, #fff 9%);
  position: relative;
  background-size: 204px 204px;
}

.item:before {
  content: "";
  display: block;
  width: 185px;
  height: 185px;
  background: #000;
  position: absolute;
  top: 5px;
  left: 5px;
  border-raius: 6px;
}
<div class="item"></div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.