我试图在网页上创建一条对角线,作为一个节/节休息.这基本上是一个分色部分.我不能使用图像,就像页面放大,图像将像素化.所以我需要能够直接在div的底部画一条对角线,如下图所示.
我尝试过使用边框,但是我不能让实际的休息时间在中间,而不是右边或左边.
有没有办法在CSS中绘制对角线？正如您所看到的,我需要创建一个90px高的div,并在该div中具有分割/对角线.然后我可以看看添加图像,但主要问题是不知道这是否可以用CSS.
解决方法
使用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>
