倾斜对角线的CSS [英] CSS for slant diagonal line

问题描述

一些CSS专家可以帮助指导我通过CSS在盒子中实现倾斜线吗?我无法附加图片.我知道可以做到这一点，但是缺乏CSS方面的专业知识，我想不到实现这一目标的方法.我指的是此示例.如果您转到页面末尾(slanthowto.html)，则有一张图像仅显示倾斜的黑线...我要实现相同的效果.

Can some CSS expert help guide me to achieve slant line in a box via css. I can't attached the image. I know this can be done but lack of expert knowledge over css I am missing the way to achieve this. I am referring to this example. If you go end of the page (slanthowto.html) there is a image which show only slanted black line... I want to implement the same.

此致

推荐答案

这是斜黑线的CSS和HTML代码:

That's the CSS and HTML code for the slanted black line:

.borderdraw {
  border-style:solid;
  height:0;
  line-height:0;
  width:0;
}

<div style="position: relative; width: 100px; height: 100px;">
<div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(64, 0, 0); border-width: 0px 0px 65px 87px;" class="borderdraw"><!-- --></div>
<div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(255, 240, 240); border-width: 0px 0px 64px 85px;" class="borderdraw"><!-- --></div>
    </div>

编辑:您还可以将属性从类复制到样式属性:

EDIT: You can also copy the properties from the class to the style attribute:

<div style="position: relative; width: 100px; height: 100px;">
  <div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(64, 0, 0); border-width: 0px 0px 65px 87px; border-style: solid; height: 0; line-height: 0; width: 0;"><!-- --></div>
  <div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(255, 240, 240); border-width: 0px 0px 64px 85px; border-style: solid; height: 0; line-height: 0; width: 0;"><!-- --></div>
</div>

这篇关于倾斜对角线的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！