Общие стили
.polygon,.trapezoid {
margin:0; padding:0; background:none;
}
.polygon {
width:10em; height:10em; border:none; display:inline-block; text-align:center;
}
.trapezoid {
display:inline-block; width:1px; height:0; margin:0 auto;
border-left:5em solid transparent; border-right:5em solid transparent;
}
.polygon .aa {
border-bottom:10em solid;border-top:none;
}
.polygon .oo,.polygon .rr {
border-top:10em solid;border-bottom:none;
}
.polygon .rr {
border-left:none; border-right:none; width:10em;
}
| Фигура |
HTML |
CSS |
|
|
<a class="polygon r3">
<b class="trapezoid aa"></b>
</a>
|
.polygon.r3 {
height:8.66em;
}
.polygon.r3 .trapezoid {
border-width:8.66em 5em;
}
|
|
|
<a class="polygon r4">
<b class="trapezoid aa"></b>
</a>
|
.polygon.r4 .trapezoid {
border-left:none;
border-right:none;
width:10em;
}
|
|
|
<a class="polygon r5">
<b class="trapezoid aa"></b>
<b class="trapezoid oo"></b>
</a>
|
.polygon.r5 {
height:9.51em;
}
.polygon.r5 .aa {
border-bottom-width:3.63em;
}
.polygon.r5 .oo {
border-width:5.88em 1.91em;
width:6.18em;
}
|
|
|
<a class="polygon r6">
<b class="trapezoid aa"></b>
<b class="trapezoid oo"></b>
</a>
|
.polygon.r6 {
height:8.66em;
}
.polygon.r6 .aa,
.polygon.r6 .oo {
border-width:4.33em 2.5em;
width:5em;
}
|
|
|
<a class="polygon r8">
<b class="trapezoid aa"></b>
<b class="trapezoid rr"></b>
<b class="trapezoid oo"></b>
</a>
|
.polygon.r8 {
height:10em;
}
.polygon.r8 .rr {
border-top-width:4.14em;
}
.polygon.r8 .aa,
.polygon.r8 .oo {
width:4.14em;
border-width:2.93em;
}
|
