带（内联）CSS的对角线边框线
我想要一个带css的白色斜条纹。我尝试了一些东西，但我没有尝试。我也会把链接放在这里，你可以看看。
有没有人可以帮助我？
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper-section-one editable">
<tbody>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td>
<table width="300" border="0" cellspacing="0" cellpadding="0" align="left" style="background: black; outline: none; outline-offset: 2px; border: 10px solid white; height: 90px;
background-image: linear-gradient(to bottom right, black, black 50%, white 50%, white); " class="wrapper-section-one editable bg-editable" data-selector="table.bg-editable">
<tbody>
<tr>
<td height="50">
<img src="images/blank.gif" width="1" height="1" alt="" title="">
</td>
</tr>
<tr>
<td style="text-align:center;">
<img src="images/blank.gif" width="1" height="27" alt="" title="">
</td>
</tr>
<tr>
<td height="20">
<img src="images/blank.gif" width="1" height="1" alt="" title="">
</td>
</tr>
<tr>
<td style="font-size:14px;color:#ffffff;text-transform:uppercase;text-align:center;font-weight:bold;">
<br/>
</td>
</tr>
<tr>
<td height="10">
<img src="images/blank.gif" width="1" height="1" alt="" title="">
</td>
</tr>
<tr>
<td style="font-size:13px;color:#ffffff;text-transform:capitalize;text-align:center;">
</td>
</tr>
<tr>
<td height="50">
<img src="images/blank.gif" width="1" height="1" alt="" title="">
</td>
</tr>
</tbody>
</table>
<table width="300" border="0" cellspacing="0" cellpadding="0" align="right" style="background: #c11717; outline: none; outline-offset: 2px; border: 10px solid white;" class="wrapper-section-one editable bg-editable" data-selector="table.bg-editable">
<tbody>
<tr>
<td height="50">
<img src="images/blank.gif" width="1" height="1" alt="" title="">
</td>
</tr>
<tr>
<td style="text-align:center;">
<img src="images/mark.png" width="17" height="27" alt="" style="display:initial;" data-selector="div.editable img">
</td>
</tr>
<tr>
<td height="20">
<img src="images/blank.gif" width="1" height="1" alt="" title="">
</td>
</tr>
<tr>
<td style="font-size:14px;color:#ffffff; text-transform:uppercase;text-align:center;font-weight:bold;">
Kop 1
</td>
</tr>
<tr>
<td height="10">
<img src="images/blank.gif" width="1" height="1" alt="" title="">
</td>
</tr>
<tr>
<td style="font-size:13px;color:#ffffff; text-transform:capitalize;text-align:center;">
Tekst 1
</td>
</tr>
<tr>
<td height="50">
<img src="images/blank.gif" width="1" height="1" alt="" title="">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table width="300" border="0" cellspacing="0" cellpadding="0" align="left" style="background: #c11717; outline: none; outline-offset: 2px; border: 10px solid white;" class="wrapper-section-one editable bg-editable" data-selector="table.bg-editable">
<tbody>
<tr>
<td height="50">
<img src="images/blank.gif" width="1" height="1" alt="" title="">
</td>
</tr>
<tr>
<td style="text-align:center;">
<img src="images/icon_date.png" width="27" height="27" alt="" style="display:initial;" data-selector="div.editable img">
</td>
</tr>
<tr>
<td height="20">
<img src="images/blank.gif" width="1" height="1" alt="" title="">
</td>
</tr>
<tr>
<td style="font-size:14px;color:#ffffff; text-transform:uppercase;text-align:center;font-weight:bold;">
Kop 2
</td>
</tr>
<tr>
<td height="10">
<img src="images/blank.gif" width="1" height="1" alt="" title="">
</td>
</tr>
<tr>
<td style="font-size:13px;color:#ffffff; text-transform:capitalize;text-align:center;">
Tekst 2
</td>
</tr>
<tr>
<td height="50">
<img src="images/blank.gif" width="1" height="1" alt="" title="">
</td>
</tr>
</tbody>
</table>
<table width="300" border="0" cellspacing="0" cellpadding="0" align="right" style="background: black; outline: none; outline-offset: 2px;border: 10px solid white;" class="wrapper-section-one editable bg-editable" data-selector="table.bg-editable">
<tbody>
<tr>
<td height="50">
<img src="images/blank.gif" width="1" height="1" alt="" title="">
</td>
</tr>
<tr>
<td style="text-align:center;">
<img src="images/wclock.png" width="24" height="27" alt="" style="display:initial;" data-selector="div.editable img">
</td>
</tr>
<tr>
<td height="20">
<img src="images/blank.gif" width="1" height="1" alt="" title="">
</td>
</tr>
<tr>
<td style="font-size:14px;color:#ffffff;text-transform:uppercase;text-align:center;font-weight:bold;">
Kop 3
</td>
</tr>
<tr>
<td height="10">
<img src="images/blank.gif" width="1" height="1" alt="" title="">
</td>
</tr>
<tr>
<td style="font-size:13px;color:#ffffff;text-transform:capitalize;text-align:center;">
Tekst 3
</td>
</tr>
<tr>
<td height="50">
<img src="images/blank.gif" width="1" height="1" alt="" title="">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
2 个答案:
答案 0 :(得分：0)
这是使用线性渐变CSS方法的图像副本。需要的标记少得多：）
＆＃13;
＆＃13;
＆＃13;
＆＃13;
div#wrapper {
float: left;
width: 220px;
height: 220px;
margin: 0px;
}
div#wrapper div {
width: 100px;
height: 100px;
float: left;
background: red;
margin: 0px 10px 10px 0px;
}
div#wrapper #d1 {
background-image: repeating-linear-gradient(145deg, black, black 60px, white 60px, white 80px);
}
div#wrapper #d4 {
background: black;
}<div id="wrapper">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
答案 1 :(得分：0)
以下是我的方法，以获得与示例图片链接完全相同的结果，但它不适用于电子邮件。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.box {
position: relative;
margin: 0 15px 15px 0;
width: 100px;
height: 100px;
float: left;
}
.cf {
clear: left;
}
.box--red {
background-color: #ff0000;
}
.box--black {
background-color: #000000;
}
.box--split:before {
content: "";
position: absolute;
border-top: 50px solid #000;
border-right: 50px solid transparent;
border-left: 50px solid #000;
border-bottom: 50px solid transparent;
box-sizing: border-box;
}
.box--split:after {
content: "";
position: absolute;
right: 0;
bottom: 0;
display: block;
box-sizing: border-box;
border-right: 40px solid #000;
border-top: 40px solid transparent;
border-bottom: 40px solid #000;
border-left: 40px solid transparent;
}<div class="box box--split">
</div>
<div class="box box--red">
</div>
<div class="box box--red cf">
</div>
<div class="box box--black">
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？