純粋な CSS 三角矢印 Div 境界線 code_html/css_WEB-ITnose

纯CSS实现 “三角箭头”代码 span {_overflow:hidden;} .wp {position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;} .arrow {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 {_overflow:hidden;} .wp {position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;} .arrow {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;} --> “三角形箭头”例1 <div style="position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;" _mce_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;" _mce_style="position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border: 16px dashed dashed solid dashed transparent transparent

red transparent;"> “三角形箭头”例1 <div style="position: relative; border: 4px solid red; padding: 20px; margin-bottom: 30px;" _mce_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;" _mce_style="position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border: 16px dashed dashed solid dashed transparent transparent

red transparent;"> <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;" _mce_style="position: absolute; left: 30px; top: -27px; width: 0; height: 0; font-size: 0; border: 16px dashed dashed solid

dashed transparent transparent #FFF transparent;"> “三角形箭头”例2 <div style="position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;" _mce_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;" _mce_style="position: absolute; left: 30px; top: -16px; width: 0; height: 0; font-size: 0; border: 16px dashed dashed dashed solid transparent transparent

transparent red;"> “三角形箭头”例3 <div style="位置: 相対; 背景: 赤; パディング: 20 ピクセル; カラー: #fff; マージン-ボトム: 30 ピクセル;" _mce_style="位置: 相対; 背景: 赤; パディング: 20px; カラー: #fff; マージン -

下部: 30px;"> <span style="position: 絶対; left: 30px; top: -16px; width: 0; height: 0; font-size: 0; border-width: 16px 24px; border-style: 破線 破線 破線 実線; border-color: 透明

透明 透明な赤;" _mce_style="position: 絶対; left: 30px; top: -16px; width: 0; height: 0; font-size: 0; border: 16px 24px 破線 破線 実線 透明

透明 透明 赤;"> <span style="position: 絶対; left: 14px; top: -32px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: 破線 破線 実線

破線; 境界線の色: 透明 透明 #fff 透明;" _mce_style="position: 絶対; left: 14px; top: -32px; width: 0; height: 0; font-size: 0; border: 16px 破線 破線 実線

破線 透明 透明 #fff 透明;"> 「三角形箭头」例4 <div style="位置: 相対; 背景: 赤; 幅: 160px; パディング: 20px; カラー: #fff; margin-bottom: 30px;" _mce_style="位置: 相対; 背景: 赤; 幅: 160px;

パディング: 20px; カラー: #fff; margin-bottom: 30px;"> <span style="position: 絶対; left: 0px; top: -12px; width: 188px; height: 0; font-size: 0; border-width: 6px; border-style: 破線 破線 実線 破線; 境界線-色: 透明

透明 赤 透明;" _mce_style="position: 絶対; left: 0px; top: -12px; width: 188px; height: 0; font-size: 0; border: 6px 破線 破線 実線 破線 透明 透明

赤 透明;"> 模拟段形边<span style="position: 絶対; 左: 0px; 底: -12px; 幅: 188px; 高さ: 0; font-size: 0; border-width: 6px; border-style: 実線 破線 破線破線; 境界線の色:

赤 透明 透明;" _mce_style="position: 絶対; left: 0px;bottom: -12px; width: 188px; height: 0; font-size: 0; border: 6px 実線 破線 破線 破線 赤

透明 透明 透明;"> 見るこの例子就会明所谓“三角边”了 <div style="border-width:40px;border-style:solid;border-color:red green black blue;line-height:0;font-size:0;overflow:hidden;width:100px;height: 0" _mce_style="line-height: 0; font-size:

0; オーバーフロー: 非表示; 幅: 100px; ボーダー: 40px;"

ある程度透明にすると、三角形を模倣できます。注意: 6 の下に透明な部分は点線または破線です。 <div style="border-width:40px;border-style:破線 破線 実線 破線;border-color:透明 透明 赤 透明;line-height:0;font-size:0;width:0;height:0 " _mce_style="line

-height: 0; font-size: 0; width: 0; height: 0; border: 40px 破線 破線 透明 透明 赤 透明;" <div style="border-width:40px;border-style:破線 実線 実線 破線;border-color:透明 青 赤 透明;line-height:0;font-size:0;width:0;height:0 " _mce_style="line-height:

0; font-size: 0; width: 0; height: 0; border: 40px 破線 実線 透明 青 赤 透明;" http://www.999jiujiu.com/

純粋な CSS 三角矢印 Div 境界線 code_html/css_WEB-ITnose

見るこの例子就会明所谓“三角边”了

ある程度透明にすると、三角形を模倣できます。注意: 6 の下に透明な部分は点線または破線です。

関連記事