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

问题描述

我正在尝试在网页上创建一条对角线，作为分节/分节符.这本质上是一个分色部分.我不能使用图像，好像页面被放大了，图像会像素化.所以我需要能够直接在div的底部绘制一条对角线，如下图所示.

我曾尝试使用边框，但是我无法将实际中断点放在中间，而不是右侧或左侧.

有没有办法在 CSS 中绘制对角线?如您所见，我需要创建一个 90 像素高的 div，并在该 div 中有分割线/对角线.然后我可以看看添加图像，但主要问题是不知道这是否可以使用 CSS.

解决方案

使用 svg，非常简单:

svg {显示:块；宽度:100%；高度:90px；背景:黄色；}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="无"><polygon points="100 0 100 10 0 10"/></svg>

请注意，我使用了 preserveAspectRatio="none" 属性，以便形状可以具有 100% 的宽度并保持 90 像素的高度

这里有一个猴子图像:

div {位置:相对；}SVG {显示:块；宽度:100%；高度:90px；背景:黄色；}图片{高度:50px；位置:绝对；顶部:0；底部:0；左:0；右:0；保证金:自动；背景:#fff;边界半径:50%；填充:10px；}

<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=""/>

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屋！