用CSS创建对角线/截面/边框 [英] Creating a diagonal line/section/border with CSS

问题描述

我试图在网页上创建一条对角线，作为一个部分/节休息。这本质上是一个分裂的颜色部分。我不能使用图像，如果页面被放大，图像将像素化。所以我需要能够直接在div的底部绘制一条对角线，如下图所示。

我已经尝试使用边框，但是我不能得到实际的中断在中间，而不是右边或左边。

有没有办法在CSS中绘制对角线？正如你可以看到，我需要创建一个高度为90px的div，并在div中有分割/对角线。我可以看看添加图像，但主要的问题是不知道这是否可能与CSS。

$ b使用svg，很简单：

  svg {display：block;宽度：100％; height：90px; background：yellow;}  

 < svg xmlns =http ：//www.w3.org/2000/svgviewBox =0 0 100 10preserveAspectRatio =none> < polygon points =100 0 100 10 0 10/>< / svg>  

注意，我使用 preserveAspectRatio =none属性，所以形状可以有100％的宽度， em>

这里有一个猴子图片：

  div {position：relative;} svg {display：block;宽度：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/svgviewBox =0 0 100 10preserveAspectRatio =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.svgalt =/>< / div>  

I am trying to create a diagonal line on a webpage, to act as a section/section break. This is essentially a split colour section. I cant use an image as if the page gets enlarged, the image is going to pixelate. So i need to be able to draw a diagonal line directly at the bottom of the div, like the image below.

I have tried using a border, however i cannot get the actual break to be in the middle, rather than the right or left hand side.

Is there a way to draw diagonal lines in CSS? As you can see, i need to create a div that is 90px high and have the split/diagonal line in that div. I can then have a look at adding the image, but the main issue is not knowing whether this is possible with CSS.

解决方案

With an svg, it is pretty simple :

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>

Note that I used the preserveAspectRatio="none" attribute so that the shape can have 100% width and keep 90px height

And here with a monkey image :

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>

这篇关于用CSS创建对角线/截面/边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！