html怎么编辑出6边形,css如何写出带边框的六边形

效果图展示

image.png

html代码

与

或

css样式

body {

background: #362e40;

}

* {

box-sizing: border-box;

}

.clearfix:before,

.clearfix:after {

display: table;

content: "";

}

.clearfix:after {

clear: both;

}

.pull-left {

float: left;

}

.logic_type-wrap {

display: inline-block;

cursor: pointer;

position: relative;

margin-right: 2px;

}

.logic_type-wrap input {

display: inline-block;

position: absolute;

top: -4px;

left: 0px;

opacity: 0;

width: 30px;

height: 24px;

z-index: 2;

cursor: pointer;

}

.logic_type-with {

width: 14px;

height: 24px;

color: #fff;

font-size: 14px;

background: #362e40;

border-top: 1px solid #d7b7ff;

border-bottom: 1px solid #d7b7ff;

}

.logic_type-or {

width: 14px;

height: 24px;

font-size: 14px;

color: #fff;

background: #362e40;

border-top: 1px solid #d7b7ff;

border-bottom: 1px solid #d7b7ff;

}

.logic_type-border-left {

position: relative;

content: '';

width: 0px;

height: 0px;

border-top: 12px solid transparent;

border-bottom: 12px solid transparent;

border-right: 8px solid #d7b7ff;

}

.logic_type-left {

position: absolute;

content: '';

width: 0px;

height: 0px;

border-top: 11px solid transparent;

border-bottom: 11px solid transparent;

border-right: 7px solid #362e40;

top: -11px;

left: 1px;

}

.logic_type-border-right {

position: relative;

content: '';

width: 0px;

height: 0px;

border-top: 12px solid transparent;

border-bottom: 12px solid transparent;

border-left: 8px solid #d7b7ff;

}

.logic_type-right {

position: absolute;

content: '';

width: 0px;

height: 0px;

border-top: 11px solid transparent;

border-bottom: 11px solid transparent;

border-left: 7px solid #362e40;

top: -11px;

left: -8px;

}

.logic-with.logic_type-wrap .logic_type-with {

color: #f9bb26;

border-top: 1px solid #f9bb26;

border-bottom: 1px solid #f9bb26;

}

.logic-with.logic_type-wrap .logic_type-border-left {

border-right: 8px solid #f9bb26;

}

.logic-with.logic_type-wrap .logic_type-border-right {

border-left: 8px solid #f9bb26;

}

.logic_or.logic_type-wrap .logic_type-or {

color: #f9bb26;

border-top: 1px solid #f9bb26;

border-bottom: 1px solid #f9bb26;

}

.logic_or.logic_type-wrap .logic_type-border-left {

border-right: 8px solid #f9bb26;

}

.logic_or.logic_type-wrap .logic_type-border-right {

border-left: 8px solid #f9bb26;

}

这样就可以写出带边框的六边形，我这边主要是radio可以进行选择的需求

有哪些不正确的地方，欢迎大家指出，谢谢