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可以进行选择的需求
有哪些不正确的地方，欢迎大家指出，谢谢