倾斜对角线的CSS

Question

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

此致

Answer 1

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

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

CSS：

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

Answer 2

5年后更新（2015年）......

2D变换现在可以获得更好的支持。他们也会做那些消除＆＃34; crunch＆＃34;或者你可能已经看到过前面方法的锯齿状边缘。 CSS下面。

.slanted-line {
  width: 300px;
  background: black;
  height: 2px;

  /* bonus rounded edges */
  border-radius: 1px;

  transform: rotate(-45deg);
  -os-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);

  /* helps with positioning */
  transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
}

根据caniuse.com的浏览器支持：

• IE 9 +
• Firefox 31 +
• Chrome 31 +
• Safari 7 +
• Opera 27 +
• iOS Safari 7.1 +
• Android Browser 4.1 +
• 移动Chrome 41 +

DEMO EXAMPLE

Answer 3

请勿使用此方法。不认真，不要。查看页面底部的日期。它说

  

最后修改时间：1月30日星期四21:56:16浪漫标准时间2003

那是七年前的事了。技术继续前进。我们不再这样做了。只需使用任何图形处理软件，绘制一个三角形，并使用这两种技术中的任何一种将图像粘贴到您的网页中。

首先，图像。这是我之前在Paint中创建的一个：

然后，使用img标记

<img src="triangle.png" alt="Triangle!" />

或背景，使用CSS方法

<div class="triangle"></div>


.triangle {
    background: url('triangle.png') no-repeat;
    width: 120px;
    height: 120px;
}

那更好，不是吗。