“三角形箭头”布局如何用纯CSS实现
发布网友
发布时间：2022-04-23 03:35
共1个回答
热心网友
时间：2022-04-06 12:17
<div style=padding: 40px; background:#fff;
<div style=position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px; <span style=position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid dashed; border-color: transparent transparent red transparent; </span 纯CSS实现三角形箭头布局的代码</div
<div style=position: relative; border: 4px solid red; padding: 20px; margin-bottom: 30px; <span style=position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid dashed; border-color: transparent transparent red transparent; </span<span style=position: absolute; left: 30px; top: -27px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid dashed; border-color: transparent transparent #FFF transparent;</span纯CSS实现三角形箭头布局的代码</div
<div style=position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px; <span style=position: absolute; left: 30px; top: -16px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent red;</span纯CSS实现三角形箭头布局的代码</div
<div style=position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px; <span style=position: absolute; left: 30px; top: -16px; width: 0; height: 0; font-size: 0; border-width: 16px 24px; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent red;</span <span style=position: absolute; left: 14px; top: -32px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid dashed; border-color: transparent transparent #fff transparent;</span纯CSS实现三角形箭头布局的代码</div
<div style=position: relative; background: red; width: 160px; padding: 20px; color: #fff; margin-bottom: 30px; <span style=position: absolute; left: 0px; top: -12px; width: 188px; height: 0; font-size: 0; border-width: 6px; border-style: dashed dashed solid dashed; border-color: transparent transparent red transparent;</span 模拟梯形边<span style=position: absolute; left: 0px; bottom: -12px; width: 188px; height: 0; font-size: 0; border-width: 6px; border-style: solid dashed dashed dashed; border-color: red transparent transparent transparent;</span </div
<h2看看这个例子就会明白所谓三角边了</h2
