- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
.chamfer {
display: table;
border-collapse: separate;
empty-cells: show;
background: transparent;
display: inline-block;
margin-bottom: 25px;
margin-right: 25px;
vertical-align: top;}
.chamfer .row {
display: table-row;}
.chamfer .boxcontent {
display: table-cell;
background: #FFFFFF;
font-size: 24px;
vertical-align: middle;
min-width: 200px;
width: 200px;
height: 173px;}
.chamfer .transparentbox {
display: table-cell;
background: transparent;
font-size: 24px;
vertical-align: middle;
min-width: 200px;
width: 200px;}
.chamfer .row .north-west {
display: table-cell;
border: 100px solid transparent;
border-top-width: 0px;
border-right-width: 0px;
border-bottom: 173px solid #FFF;
width: 0px;}
.chamfer .row .north-east {
display: table-cell;
border: 100px solid transparent;
border-top-width: 0px;
border-left-width: 0px;
border-bottom: 173px solid #FFF;
width: 0px;}
.chamfer .row .south-west {
display: table-cell;
border: 100px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top: 173px solid #FFF;
width: 0px;}
.chamfer .row .south-east {
display: table-cell;
border: 100px solid transparent;
border-bottom-width: 0px;
border-left-width: 0px;
border-top: 173px solid #FFF;
width: 0px;}
.chamfer .row3 .north-west {
border: 100px solid yellow;
border-top-width: 0px;
border-right-width: 0px;
border-bottom: 173px solid red;}
.chamfer .row3 .north-east {
border: 100px solid yellow;
border-top-width: 0px;
border-left-width: 0px;
border-bottom: 173px solid red;}
.chamfer .row2 .south-west {
border: 100px solid yellow;
border-bottom-width: 0px;
border-right-width: 0px;
border-top: 173px solid #FFF;}
.chamfer .row2 .south-east {
border: 100px solid yellow;
border-bottom-width: 0px;
border-left-width: 0px;
border-top: 173px solid #FFF;}
.chamfer .row4 .south-west {
border: 100px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top: 173px solid red;}
.chamfer .row4 .south-east {
border: 100px solid transparent;
border-bottom-width: 0px;
border-left-width: 0px;
border-top: 173px solid red;}
.chamfer .row2 .transparentbox, .chamfer .row3 .transparentbox {
background: yellow;
height: 173px;}
.chamfer .row3 .boxcontent, .chamfer .row4 .boxcontent {
background: red;
height: 173px;}
body {
color: #3B3A37;
background-color: olive;}
Реальный пример шестиугольных блоков (в виде сот) на чистом CSS2.
Страница в действии:
https://output.jsbin.com/xewelufoda/