效果图展示

image.png

html代码

<div class="logic_type">
            <div class="logic_type-wrap clearfix logic-with">
                <div class="logic_type-border-left pull-left">
                    <div class="logic_type-left"></div>
                </div>
                <div class="logic_type-with pull-left">
                    <input type="radio" value="AND">
                    <label for="AND">与</label>
                </div>
                <div class="logic_type-border-right pull-left">
                    <div class="logic_type-right"></div>
                </div>
            </div>
            <div class="logic_type-wrap clearfix">
                <div class="logic_type-border-left pull-left">
                    <div class="logic_type-left"></div>
                </div>
                <div class="logic_type-or pull-left">
                    <input type="radio" value="OR">
                    <label for="OR" class="logic_type-label">或</label>
                </div>
                <div class="logic_type-border-right pull-left">
                    <div class="logic_type-right"></div>
                </div>
            </div>
        </div>

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