Arrow Box с CSS

Ответ 1

Я создал свой элемент с окружением 1px. Я использую один элемент <div> и использую :before и :after псевдоэлементы (поддержка браузера). Основной прямоугольник имеет регулярную границу 1px, но элементы треугольника представляют собой по существу два треугольника, один более темный, чем другой.

Более легкий треугольник сидит поверх более темного треугольника, который скрывает его, и слегка сдвигается влево, чтобы показать более темный треугольник внизу. Полученная иллюзия - это 1px темная граница самого треугольника.

Вот вопрос, который задает аналогичный вопрос:

Как создать хвост подсказки " используя чистый CSS?

Один из ответов на самом деле имеет большое объяснение того, как можно достичь этого эффекта треугольника:

fooobar.com/questions/2585/...

Кроме того, это отличная ссылка на все интересные вещи, которые вы можете сделать с помощью границ (благодаря PSCoder):

• http://css-tricks.com/examples/ShapesOfCSS/

... и вот сладостный генератор css (благодаря Дэвиду Тайароа):

• http://cssarrowplease.com/

В любом случае, вот соответствующий код:

    #arrow {
      width: 128px;
      height: 100px;
      background-color: #ccc;
      border: 1px solid #999;
      position: relative;
    }
    #arrow:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 128px;
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-left: 12px solid #ccc;
    }
    #arrow:before {
      content: '';
      position: absolute;
      top: 0px;
      left: 129px;
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-left: 12px solid #999;
    }

<div id="arrow"></div>

Ответ 2

Здесь - это решение, которое я создал

Есть два простых способа сделать это. Первый, менее эффективный способ состоит в том, чтобы иметь 2 элемента. Я использую псевдоэлемент :after. Я использовал position:absolute в :after по двум причинам.

• Вы можете поместить элемент, где вам нужно
• Это предотвращает обрезание конца треугольника.

Ключом к созданию треугольника является свойство border. У вас есть 2 границы с цветом transparent. Эти две границы противоположны тому направлению, в котором вы хотите идти. Поэтому, если вы хотите сделать правильный треугольник, используйте top и bottom. То, что придает стрелке, является последней границей. Он также идет в обратном направлении. Поэтому для правого треугольника вы должны использовать border-left с цветом. Чтобы получить правильную высоту, вы должны сделать половину высоты поля, которое вы хотите поместить на

Ответ 3

SVG - рекомендуемый способ создания таких фигур. Он предлагает простоту и масштабируемость.

Мы можем использовать элемент SVG polygon или path для создания фигуры, как указано выше, и инсульта/заполнения его каким-то сплошным цветом, градиентом или рисунком.

Для определения фигур в элементе polygon используется только один атрибут points. Этот атрибут состоит из списка точек. Каждая точка должна иметь 2 числа, координату x и координату y. Прямая линия автоматически рисуется от последней точки до начальной точки, чтобы закрыть фигуру.

Ниже приведен необходимый код для создания этой формы:

<polygon points="10,12 265,10 285,93 265,184 10,184"
         stroke="#333"
         stroke-width="2"
         fill="#eee" />

Ниже приведено краткое описание приведенного выше кода:

• Атрибут
• points определяет структуру фигуры. Атрибут
• stroke определяет цвет для контура/границы.
• stroke-width определяет толщину контура/границы. Атрибут
• fill определяет цвет для заполняемой внутренней формы.

Выходное изображение:

Рабочий пример:

body {
  background: #b6cdc7  url("https://www.hdwallpapers.net/previews/hot-air-balloon-over-the-mountain-987.jpg") no-repeat;
  background-position: center bottom;
  background-size: cover;
  margin: 0;
}

.box {
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
}

<div class="box">
  <svg width="300" height="200" viewBox="0 0 300 200">
    <polygon points="10,12 265,10 285,93 265,184 10,184" stroke="#333" stroke-width="2" fill="#eee" />
  </svg>
</div>