「台形」の描画。borderを使った例とbackgroundを使った例です。「Trapezoid」って知りませんでした・・・
borderを使った例(上)
html
<div class="trapezoid_up"></div>
css
.trapezoid_up { box-sizing: content-box; width: 50px; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #39a9d6; }
borderを使った例(右)
html
<div class="trapezoid_right"></div>
css
.trapezoid_right { box-sizing: content-box; width: 0; height: 50px; border-left: 100px solid #39a9d6; border-top: 50px solid transparent; border-bottom: 50px solid transparent; }
borderを使った例(下)
html
<div class="trapezoid_down"></div>
css
.trapezoid_down { box-sizing: content-box; width: 50px; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #39a9d6; }
borderを使った例(左)
html
<div class="trapezoid_left"></div>
css
.trapezoid_left { box-sizing: content-box; width: 0; height: 50px; border-right: 100px solid #39a9d6; border-top: 50px solid transparent; border-bottom: 50px solid transparent; }
backgroundを使った例(上)
html
<div class="trapezoid_g_up"></div>
css
.trapezoid_g_up { overflow: hidden; background: transparent; } .trapezoid_g_up:before { display: block; width: 200px; height: 100px; content: ""; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: skewX(-25deg); transform: skewX(-25deg); background-image: linear-gradient( 45deg, #2d424f 0%, #39a9d6 50%, transparent 50%, transparent 100% ); }
backgroundを使った例(右)
html
<div class="trapezoid_g_right"></div>
css
.trapezoid_g_right { overflow: hidden; background: transparent; } .trapezoid_g_right:before { display: block; width: 100px; height: 200px; content: ""; -webkit-transform-origin: 0 0; transform-origin: 0 100%; -webkit-transform: skewY(-25deg); transform: skewY(-25deg); background-image: linear-gradient( 45deg, #2d424f 0%, #39a9d6 50%, transparent 50%, transparent 100% ); }
backgroundを使った例(下)
html
<div class="trapezoid_g_down"></div>
css
.trapezoid_g_down { overflow: hidden; background: transparent; } .trapezoid_g_down:before { display: block; width: 200px; height: 100px; content: ""; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: skewX(25deg); transform: skewX(25deg); background-image: linear-gradient( 135deg, #2d424f 0%, #39a9d6 50%, transparent 50%, transparent 100% ); }
backgroundを使った例(左)
html
<div class="trapezoid_g_left"></div>
css
.trapezoid_g_left { overflow: hidden; background: transparent; } .trapezoid_g_left:before { display: block; width: 100px; height: 200px; content: ""; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: skewY(25deg); transform: skewY(25deg); background-image: linear-gradient( -45deg, #2d424f 0%, #39a9d6 50%, transparent 50%, transparent 100% ); }