it-swarm.com.ru

Создание диагональной линии/раздела/границы с помощью CSS

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

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

Есть ли способ рисовать диагональные линии в CSS? Как вы можете видеть, мне нужно создать div с высотой 90px и иметь разделенную/диагональную линию в этом div. Затем я могу взглянуть на добавление изображения, но главная проблема заключается в том, чтобы не знать, возможно ли это с помощью CSS. 

Diagonal section separator

13
Dom Greenslade BSc

С SVG это довольно просто:

svg {
  display: block;
  width: 100%;
  height: 90px;
  background: yellow;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
  <polygon points="100 0 100 10 0 10" />
</svg>

Обратите внимание, что я использовал атрибут preserveAspectRatio="none", чтобы форма могла иметь ширину 100% и сохранять высоту 90px

А вот с изображением обезьяны:

div {
  position: relative;
}
svg {
  display: block;
  width: 100%;
  height: 90px;
  background: yellow;
}
img {
  height: 50px;
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  background: #fff;
  border-radius: 50%;
  padding: 10px;
}
<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
    <polygon points="100 0 100 10 0 10" />
  </svg>
  <img src="http://images.clipartpanda.com/monkey-clipart-black-and-white-16981-monkey-face-svg.svg" alt="" />
</div>

20
web-tiki

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

Первоначально разделил это на 2 отдельных div/треугольника и соединил их, но благодаря web-tiki и kaiido усовершенствовал его, чтобы использовать только 1 div и минимальный CSS

*{
  border: 0;
  padding: 0;
  margin: 0;
}

#gradient {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 90px 100vw 0 0;
  border-color: yellow black transparent transparent;
  transform: scale(1.0001);
}
<div id="gradient"></div>

Оригинальный ответ, используя несколько дел:

*{
  border: 0;
  padding: 0;
  margin: 0;
}

#container {
  width: 100%;
  position: relative;
}

#container div {
  position: absolute;
}

#top-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 90px 100vw 0 0;
  border-color: yellow transparent transparent transparent;
}

#bottom-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 90px 100vw;
  border-color: transparent transparent black transparent;
}
<div id="container">
  <div id="top-triangle"></div>
  <div id="bottom-triangle"></div>
</div>

8
Adjit

Используйте линейный градиент

div {
  height: 90px;
  background-image: linear-gradient(to bottom right, yellow, yellow 50%, black 50%, black);
}
<div></div>

5
Paulie_D

Вы можете использовать CSS3 clip:

.yellow {
  width: 100%;
  height: 90px;
  background: yellow;
  -webkit-clip-path: polygon(100% 0, 0 0, 0 100%);
  clip-path: polygon(100% 0, 0 0, 0 100%);
}
.black {
  width: 100%;
  height: 90px;
  background: black;
  -webkit-clip-path: polygon(100% 0, 0 100%, 100% 99%);
  clip-path: polygon(100% 0, 0 100%, 100% 99%);
  margin-top: -90px;
}
<div class="yellow"></div>
<div class="black"></div>

Демо: http://jsfiddle.net/zLkrfeev/2/

Это не широко поддерживается браузерами: http://caniuse.com/#feat=css-clip-path

3
Ivanka Todorova

если вы хотите поместить диагональную границу в столбец, вы можете сделать это таким образом, и она будет реагировать на 100%. Ваше требование может быть другим, хотя. Я поместил это прозрачное изображение, которое содержит белую диагональную границу в правом столбце этого раздела.

<div id="wrapper">
  <div class="h-row">
    <div class="h-left">
    </div>
    <div class="h-right">
      <div class="hr-box"></div>
    </div>
  </div>
</div>

<style>
.h-row{display: table; table-layout: fixed; height: 100%; width: 100%;}
.h-left,
.h-right{display: table-cell; vertical-align: top; height:250px;}/*height is just for demo purpose you can remove it ofcourse and fill the content */ 
.h-left{background: #e9eae2; padding: 50px 83px 15px 165px; width: 69%;}
.h-right{background: #7acec3 url('https://previews.dropbox.com/p/thumb/AAMv9WREPIx2AXUVhzCrK5Hl1jxf3ofX0teck9P94bG_SCjB28QPmKqXuchYyjp_xFMjMrGLzRYHh0O9wBOZJMZW9L_97lScKB22dgco9eGMJ1PCBbFepUcDkPg3aUE_1ONik2rKQ2SgRvtUgdq8nA_Ev1gxLxq8yWcXNKOdxKGBNOqe4FTHnbAgGy-JD4UtwZliw8c0fmNah8rydlD4JetFxNubkUyW4I_Q-XRL5qjW9A/p.png?size=1280x960&size_mode=3') no-repeat center center/ 100% 100%; padding: 50px 165px 15px 0; width: 31%; position: relative;}
.h-left .row{margin:0 -44px;}
</style>

https://codepen.io/neel555nc/pen/LgjoOg

0
confusedGuy