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

rotate rectangles to get hexagon

html5, math, hexagon

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1809
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    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;
}

HTML

rotate rectangles to get hexagon

html5, math, hexagon

编辑器支持Emmet

快捷键

rotate rectangles to get hexagon

html5, math, hexagon

HTML5 Canvas 蜂巢背景图案+六边形雾化旋转特效

HTML5/SVG转盘形状的图片轮播器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：