长方形旋转html5,HTML5/SVG旋转长方形来得到六边形图案

CSS

语言：

CSSSCSS

确定

* {

margin: 0;

font: inherit;

}

html {

overflow: hidden;

height: 100vh;

}

form {

overflow: hidden;

position: absolute;

right: 0;

padding: .5em;

background: #111;

color: #eee;

font: 1em trebuchet ms, verdana, sans-serif;

}

label {

display: block;

}

input[type='checkbox'],

input[type='radio'] {

position: absolute;

transform: translate(-100vw);

}

input[type='checkbox'] + label,

input[type='radio'] + label {

padding: .25em 0;

cursor: pointer;

}

input[type='checkbox'] + label:before,

input[type='radio'] + label:before {

box-sizing: border-box;

display: inline-block;

margin-right: .25em;

border: solid 2px currentcolor;

width: 1.25em;

height: 1.25em;

vertical-align: middle;

}

input[type='radio'] + label:before {

border-radius: 50%;

padding: 4px;

content: '';

}

input[type='radio']:checked + label:before {

background: currentcolor content-box;

}

input[type='range'] {

margin-top: .5em;

border: solid 0 transparent;

border-width: 0.25em 0.5em;

width: 10em;

height: 1.5em;

background: transparent;

color: #e18728;

cursor: pointer;

}

input[type='range']::-webkit-slider-runnable-track,

input[type='range']::-webkit-slider-thumb,

input[type='range'] {

-webkit-appearance: none;

}

input[type='range']::-webkit-slider-runnable-track {

width: 10em;

height: 0.25em;

background: silver;

}

input[type='range']::-moz-range-track {

width: 10em;

height: 0.25em;

background: silver;

}

input[type='range']::-ms-track {

color: transparent;

width: 10em;

height: 0.25em;

background: silver;

}

input[type='range']::-moz-range-progress {

background: currentcolor;

}

input[type='range']::-ms-fill-lower {

background: currentcolor;

}

input[type='range']::-webkit-slider-thumb {

margin-top: -0.5em;

border: none;

width: 1.25em;

height: 1.25em;

border-radius: 50%;

background: currentcolor;

}

input[type='range']::-moz-range-thumb {

border: none;

width: 1.25em;

height: 1.25em;

border-radius: 50%;

background: currentcolor;

}

input[type='range']::-ms-thumb {

margin-top: auto;

border: none;

width: 1.25em;

height: 1.25em;

border-radius: 50%;

background: currentcolor;

}

input[type='range']:focus {

outline: solid 2px currentcolor;

}

output {

font-weight: 900;

}

* {

stroke: currentcolor;

stroke-width: 2px;

vector-effect: non-scaling-stroke;

}

body {

display: flex;

height: 100%;

}

svg {

flex: 1;

}

text {

fill: #a048b9;

stroke: none;

font: 700 12.5em monospace;

dominant-baseline: middle;

}

[id='r'] {

fill: #94dcca;

fill-opacity: .5;

}

[id='r'] path {

stroke: none;

}

[id='r'] line {

color: dimgrey;

}

[id='p'] {

fill: none;

stroke: #1c9edc;

stroke-width: 4px;

}