5

Интересно было бы увидеть решение на CSS, но SVG тоже подойдет. Идеально было бы с адаптивностью.

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

2 ответа 2

8

Вариант на CSS:

* {
  margin: 0;
  padding: 0;
}

body {
  background: url("http://www.yorkpress.co.uk/resources/images/6599017.jpg?display=1&htype=0&type=responsive-gallery")20% 10%;
  background-size: cover;
}

.wrapper {
  position: relative;
  margin: 2rem;
  width: 20rem;
  height: 20rem;
  background-color: white;
  border: 0.0625rem solid red;
}

.wrapper .angle {
  position: absolute;
  top: -1rem;
  width: calc(50% - 1rem);
}

.angle:first-child {
  left: 0;
  border-bottom: 1rem solid white;
  border-right: 1rem solid transparent;
}

.angle:last-child {
  right: 0;
  border-bottom: 1rem solid white;
  border-left: 1rem solid transparent;
}

.angle::before {
  content: '';
  position: absolute;
  top: -0.04rem;
  z-index: -1;
  width: 98.5%;
  transform: scale(1.02)
}

.angle:first-child::before {
  left: 0.0625rem;
  border-bottom: 1rem solid red;
  border-right: 1rem solid transparent;
}

.angle:last-child::before {
  right: 0.0625rem;
  border-bottom: 1rem solid red;
  border-left: 1rem solid transparent;
}
<div class="wrapper">
  <div class="angle"></div>
  <div class="angle"></div>
</div>

Вариант на SVG:

body {
  background: url("http://www.yorkpress.co.uk/resources/images/6599017.jpg?display=1&htype=0&type=responsive-gallery")20% 10%;
  background-size: cover;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="290" height="310" viewBox="0 0 290 310">
  <polygon points="10 10 125 10 150 35 175 10 285 10 285 300 10 300" fill="white" stroke="red"/>	
</svg>

5
  • не подходит, доолжно фон быть видно через этот треугольник
    – WVFFLIFE
    16 июн 2018 в 10:45
  • извиняюсь, не проверил. спасибо большое)
    – WVFFLIFE
    16 июн 2018 в 10:50
  • @WVFFLIFE, всегда рад помочь. Если желаете, могу добавить вариант на SVG.
    – Arthur
    16 июн 2018 в 10:52
  • буду благодарен. было бы интересно посмотреть
    – WVFFLIFE
    16 июн 2018 в 10:53
  • @WVFFLIFE, добавил второй вариант. Намного проще реализовать с SVG.
    – Arthur
    16 июн 2018 в 11:02
5

Хоть и есть принятый ответ, но я ярый любитель правила один элемент – один тег. И не смог пройти мимо:

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  background: linear-gradient(wheat , aquamarine);
}

.pane {
  position: relative;
  margin: 20px;
  width: 200px;
  min-height: 100px;
  background: linear-gradient(to bottom, transparent 20px, white 20px);
  border: 1px solid red;
  border-top: 0;
  overflow: hidden;
  padding: 30px 10px 10px;
  text-align: center;
}

.pane:before {
  content: '';
  width: 50%;
  position: absolute;
  left: 0;
  top: 0;
  height: 20px;
  margin: 0 0 0 -11px;
  border-right: 1px solid red;
  border-top: 1px solid red;
  background-color: white;
  transform: skewX(45deg);
}

.pane:after {
  content: '';
  width: 50%;
  position: absolute;
  right: 0;
  top: 0;
  height: 20px;
  margin: 0 -11px 0 0;
  border-left: 1px solid red;
  border-top: 1px solid red;
  background-color: white;
  transform: skewX(-45deg);
}
<div class="pane">
  StackOverflow.com
</div>

1
  • Честно сказать.. тоже ярый любитель:) skew — хорошая идея.
    – Arthur
    16 июн 2018 в 12:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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