Блог

Главная - Вопросы по программированию - Добавить полигон в качестве фона css

Добавить полигон в качестве фона css

#css

#css

Вопрос:

Я хочу иметь div, где верхняя часть имеет черный фон и является многоугольником(0 0, 100% 0, 100% 780 пикселей, 0 670 пикселей). Другая часть фона этого div должна быть белой. Как я могу это сделать?

Ответ №1:

Когда вы говорите «полигон», вы имеете в виду полигон пути клипа?

Может быть, что-то вроде этого? Я произвольно сделал DIV 1000×1000.

 .polygon-bg 
{   width: 1000px;
    height: 1000px;
    position: relative;
}

.polygon-bg::before
{   background-color: Lime;
    content: "";
    clip-path: polygon(0 0, 100% 0, 100% 780px, 0 670px);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}



.polygon-bg .content
{   position: relative;
    z-index: 2;
}  
 <!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div class="polygon-bg">
    <div class="content">
     <h1>Some text...</h1>
    </div>
    </div>
  </body>
 </html>

Комментарии:

1. Это хороший пример рисования полигона, но каков наилучший способ сделать его фоном для div? Нужно ли нам помещать его в собственный div, который будет находиться за основным div?

2. @AHaworth, просто поместите содержимое в div.

3. @Linux4Life531 да, это было бы нормально, если вы можете изменить HTML [вопрос помечен только CSS, но я предполагаю, что они могут изменить HTML, если он принадлежит им] — и это более понятный способ рисования (с использованием пути клипа), чем способ фонового изображения в моем ответе, где жонглированиепрозрачный и другой цвет не сразу бросается в глаза.

4. Я отредактировал приведенный выше код. Путь клипа отсечет содержимое, но если вы используете его как элемент before и позиционируете его абсолютно, это может сработать. Просто убедитесь, что любой контент, который вы, возможно, захотите перекрыть, будет расположен относительно с более высоким z-индексом. Чтобы сделать текст более заметным, я изменил цвет bg на lime, но, очевидно, можно внести изменения в цвет.

Ответ №2:

Для простой формы, подобной этой, вы могли бы использовать линейные градиенты в объявлении CSS фонового изображения, поскольку у вас может быть столько «изображений», сколько вам нравится, разделенных запятыми, и каждое со своим собственным позиционированием.

Ваша фигура представляет собой прямоугольник с треугольником внизу. Вместо того, чтобы использовать разные цвета для слияния друг с другом, мы можем просто использовать черный как для начального, так и для конечного цветов.

Итак, вот фрагмент для создания класса с именем polygon, который сделает цвет фона div белым и наложит один черный полигон.

 .polygon {
     width:400px;/* set these as required */
     height:1024px;
     background:
       linear-gradient(black,black) top/100% 670px, 
       linear-gradient(to bottom left,black 50%,transparent 50%) 0px 670px /100% 110px;
       background-color:white;
       background-repeat:no-repeat;
    }  
 <div class="polygon"></div>