html圆⾓梯形边框，如何使⽤HTML5SVG制作圆⾓多边形CSS
语⾔：
CSSSCSS
确定
body {
display: flex;
margin: 0;
height: 100vh;
}
svg {
flex: 1;
}
path,
polygon {
fill: none;
stroke: currentColor;
stroke-width: 3px;
vector-effect: non-scaling-stroke;
}
polygon {
color: #807F85;
}
path {
color: mediumspringgreen;
}
form {
position: absolute;
left: 0;
padding: .5em;
background: #222;
color: #ddd;
font: 1em/2 trebuchet ms, verdana, sans-serif;
text-align: center;
}
input[type='radio'] {
position: absolute;
svg矢量图下载left: -100vw;
}
input[type='radio'] + label {
display: inline-block;
cursor: pointer;
}
input[type='radio'] + label:before {
box-sizing: border-box;
display: inline-block;
margin: 0 .5em;
border: solid .125em currentcolor; padding: .25em;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background-clip: content-box;
vertical-align: middle;
content: '';
}
input[type='radio']:checked + label { color: mediumspringgreen;
}
input[type='radio']:checked + label:before { background-color: currentcolor;
}
input[type='range'] {
display: block;
margin: .5em auto 0;
border: solid 0 transparent;
border-width: 0 .25em;
padding: 0;
width: 14em;
height: 2.25em;
background: transparent;
font: inherit;
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 { border: none;
width: 14em;
height: 0.25em;
border-radius: 0.125em;
background: #5c5c5c;
}
input[type='range']::-moz-range-track {
border: none;
width: 14em;
height: 0.25em;
border-radius: 0.125em;
background: #5c5c5c;
}
input[type='range']::-ms-track {
border: none;
width: 14em;
height: 0.25em;
border-radius: 0.125em;
background: #5c5c5c;
color: transparent;
}
input[type='range']::-webkit-slider-thumb {
margin-top: -0.625em;
box-sizing: border-box;
border: solid 0.25em #222;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #5c5c5c;
transition: .3s;
}
input[type='range']::-moz-range-thumb { box-sizing: border-box;
border: solid 0.25em #222;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #5c5c5c;
transition: .3s;
cursor: ew-resize;
}
input[type='range']::-ms-thumb {
margin-top: 0;
box-sizing: border-box;
border: solid 0.25em #222;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #5c5c5c;
transition: .3s;
}
input[type='range']::-ms-fill-lower,
input[type='range']::-ms-fill-upper { background: transparent;
}
input[type='range']::-ms-tooltip {
display: none;
}
input[type='range'] + label {
display: block;
padding-bottom: 1em;
}
input[type='range']:focus {
outline: none;
}
input[type='range']:focus::-webkit-slider-thumb {
border-width: 0;
background: mediumspringgreen;
}
input[type='range']:focus::-moz-range-thumb {
border-width: 0;
background: mediumspringgreen;
}
input[type='range']:focus::-ms-thumb {
border-width: 0;
background: mediumspringgreen;
}
input[type='range'][max='1']:focus::-webkit-slider-runnable-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/1) 100%;
}
input[type='range'][max='1']:focus::-moz-range-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/1) 100%;
}
input[type='range'][max='1']:focus::-ms-track {