倾斜对角线的CSS

Question

一些CSS专家可以帮助指导我通过css在一个盒子中实现斜线.我无法附上图像.我知道这可以做到但缺乏对css的专业知识我错过了实现这一目标的方法.我指的是这个例子.如果你到页面的末尾(slanthowto.html),有一个图像只显示倾斜的黑线...我想实现相同的.

问候,

Answer 1

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

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

CSS:

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

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

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