我一直在尝试使用带有复选标记的纯CSS创建一个六边形边框。
我发现六角形的边框/轮廓和JoshC的答案值得追求。 我创造了一个小提琴 ,一直试图让形状表现为内联。 我打算在完成后将其转换为使用em vs px。
我可以让三个中的两个正确定位而不是第三个。 我还没有尝试过我的支票。 我已经使用了JoshC的CSS并创建了一个基类来最小化重复设置。 并取得了进展,但我没有成功。 基本前提是在这里,小提琴更多涉及。 形状下方还有白色空间。
✔ <div class="hex hex1"></div> <div class="hex hex2"></div> <div class="hex hex3"></div> Body{font-size:24px;} .hex:before{content:"";width:0;height:0;border-bottom:30px solid #6C6;border-left:52px solid transparent;border-right:52px solid transparent;position:absolute;top:-30px;left:0;} .hex{margin-top:30px;margin-bottom:30px;width:104px;height:60px;background-color:#6C6;position:relative;} .hex:after{content:"";width:0;position:absolute;bottom:-30px;border-top:30px solid #6C6;border-left:52px solid transparent;border-right:52px solid transparent;left:0;} .hex1:before{border-bottom:30px solid #6C6;border-left:52px solid transparent;border-right:52px solid transparent;} .hex1{background-color:#6C6;position:relative;} .hex1:after{border-top:30px solid #6C6;border-left:52px solid transparent;border-right:52px solid transparent;left:0;} .hex2:before{border-bottom:30px solid red;border-left:52px solid transparent;border-right:52px solid transparent;} .hex2{background-color:red;position:relative;top:0;-webkit-transform:scale(.6);-moz-transform:scale(.6);transform:scale(.6);z-index:3;} .hex2:after{border-top:30px solid red;border-left:52px solid transparent;border-right:52px solid transparent;left:0;} .hex3:before{border-bottom:30px solid blue;border-left:52px solid transparent;border-right:52px solid transparent;} .hex3{background-color:blue;position:relative;top:-90px;-webkit-transform:scale(.8,.8);-moz-transform:scale(.8,.8);transform:scale(.8,.8);} .hex3:after{border-top:30px solid blue;border-left:52px solid transparent;border-right:52px solid transparent;left:0;}根据GCyrillus的答案更新了我的小提琴 ! 我添加了-webkit-transform:scale for chrome。
I have been trying to create a Hexagonal border with pure CSS with a check mark in it.
I found Hexagon shape with a border/outline and the answer by JoshC worth pursuing. I created a fiddle an have been trying to get the shapes to behave inline. It is my intention to convert this to use em vs px after completion.
I can get two of the three to position correctly but not the third. I have not tried to get my check in the box yet. I have taken JoshC's CSS and created a base class to minimize duplicate settings. And have made progress but I have not succeeded. The basic premise is here, withe the fiddle being more involved. There is also a matter of white space below the shape.
✔ <div class="hex hex1"></div> <div class="hex hex2"></div> <div class="hex hex3"></div> Body{font-size:24px;} .hex:before{content:"";width:0;height:0;border-bottom:30px solid #6C6;border-left:52px solid transparent;border-right:52px solid transparent;position:absolute;top:-30px;left:0;} .hex{margin-top:30px;margin-bottom:30px;width:104px;height:60px;background-color:#6C6;position:relative;} .hex:after{content:"";width:0;position:absolute;bottom:-30px;border-top:30px solid #6C6;border-left:52px solid transparent;border-right:52px solid transparent;left:0;} .hex1:before{border-bottom:30px solid #6C6;border-left:52px solid transparent;border-right:52px solid transparent;} .hex1{background-color:#6C6;position:relative;} .hex1:after{border-top:30px solid #6C6;border-left:52px solid transparent;border-right:52px solid transparent;left:0;} .hex2:before{border-bottom:30px solid red;border-left:52px solid transparent;border-right:52px solid transparent;} .hex2{background-color:red;position:relative;top:0;-webkit-transform:scale(.6);-moz-transform:scale(.6);transform:scale(.6);z-index:3;} .hex2:after{border-top:30px solid red;border-left:52px solid transparent;border-right:52px solid transparent;left:0;} .hex3:before{border-bottom:30px solid blue;border-left:52px solid transparent;border-right:52px solid transparent;} .hex3{background-color:blue;position:relative;top:-90px;-webkit-transform:scale(.8,.8);-moz-transform:scale(.8,.8);transform:scale(.8,.8);} .hex3:after{border-top:30px solid blue;border-left:52px solid transparent;border-right:52px solid transparent;left:0;}Updated my fiddle based on the answer by GCyrillus! I added -webkit-transform:scale for chrome.
最满意答案
关于什么 :
<div class="hex hex1"> <div class="hex hex2"> <div class="hex hex3"> ✔ </div> </div> </div>http://codepen.io/gc-nomade/pen/xEFaB
嵌套你的元素并使用较少的relative / top:-xx; 它将更容易站在流程中
what about :
<div class="hex hex1"> <div class="hex hex2"> <div class="hex hex3"> ✔ </div> </div> </div>http://codepen.io/gc-nomade/pen/xEFaB
nest your element and use less relative/top : -xx ; it will stand in the flow much more easier
更多推荐
px,hex,CSS,电脑培训,计算机培训,IT培训"/> <meta name="description"
发布评论