如何制作八角形盒子？ [英] How can I make octagon shape box?
本文介绍了如何制作八角形盒子？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用CSS创建下面给定的框。
我搜索了很多，阅读非常好的文章，例如提供的CodePen 具有使用不同的方法。像上面的代码片段一样，这也有一个非常小的毛刺，其中由于使用了倾斜变换，左侧的有角度边界有点薄。
.shape，.octagon，.shape：before，.shape：after {border-top：2px solid steelblue; border-bottom：2px solid steelblue;}。shape {height：-webkit-calc（141.44px + 100px）; / * width * sin（135）* 2 + width * / height：-moz-calc（141.44px + 100px）; height：calc（141.44px + 100px）; width：100px;位置：相对; margin：40px 80px;}。shape：after，.shape：before，.octagon {position：absolute;高度：100％; width：-webkit-calc（100％+ 2px）; width：-moz-calc（100％+ 2px）; width：calc（100％+ 2px）;}。shape：before，.shape：after {content：''; top：-2px; left：-2px;}。octagon {top：-2px; left：-2px; -webkit-transform：rotate（90deg）; -moz变换：旋转（90deg）; transform：rotate（90deg）;}。shape：before {-webkit-transform：rotate（135deg）; -moz-变换：旋转（135deg）; transform：rotation（135deg）;}。shape：after {-webkit-transform：rotate（-135deg）; -moz-transform：rotate（-135deg）; transform：rotate（-135deg）;}。semi-transparent，.semi-transparent .octagon，.semi-transparent.shape：after，.semi-transparent.shape：before {background：rgba（1,1,1,0.5 ）; } body {background：-webkit-linear-gradient（90deg，crimson，indianred，purple）;背景：-moz-linear-gradient（90deg，crimson，indianred，purple）;背景：线性梯度（90度，深红，印地安，紫色）}身体> div {display：inline-block;}
< div class =shape> < div class =octagon>< / div>< / div>< div class =shape half-transparent> < div class =octagon>< / div>< / div>
I want to create the below given box by using CSS.
I searched a lot and read very good articles like https://css-tricks.com/examples/ShapesOfCSS/ but I got stuck in one issue - the purple border cutting edges. I tried octagon shape but that is not working for this case.
I almost achieved this. Here is my snippet:
.box-outer {
width: 300px;
height: 120px;
padding: 15px 30px;
background: rgba(237, 236, 236, 0.72);
border: 3px solid rgb(89, 67, 128);
position: relative;
border-right: 20px solid rgb(89, 67, 128);
}
.box-outer:before {
content: "";
position: absolute;
top: -3px;
left: -4px;
border-bottom: 29px solid rgb(255, 252, 252);
border-right: 29px solid #594380;
border-top: 28px solid #FFF;
height: 66%;
width: 0;
}
.box-outer:after {
content: "";
position: absolute;
top: -3px;
right: -13%;
border-top: 29px solid white;
border-left: 29px solid #594380;
border-bottom: 28px solid #FFF;
width: 0;
height: 66%;
}
.box-outer .right-text {
position: absolute;
right: -22%;
color: white;
font-size: 20px;
top: 40%;
z-index: 10;
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
<div class="box-outer">
<span class="right-text">
LEGISLATIVE
</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<!--box outer-->
Current work screenshot
解决方案
Here is an alternate method using CSS3 transforms to achieve the octagon shape and also have transparency inside it. While using this method, the background need not be a solid color. It can be a image or a gradient.
The shape essentially consists of the following:
- A container with a top border, bottom border and an inset box shadow on the right hand side. (Green colored area in below screenshot*)
- A pseudo-element on the left side with the same height as the container that is rotated with perspective using transforms. (Blue colored area in below screenshot*)
- Another pseudo-element on the right side which is rotated in the reverse direction of the element on the left side. (Red colored area in below screenshot*)
- The inset box-shadow on the container is the same as the background of the pseudo-element on the right side (to make it look as though only half of it is skewed).
- Extra shadows around the parent container and the pseudo-element on the right side to provide a shadow to the whole shape.
* - different colors are used only for illustrating how the shape is formed.
.shape {
position: relative;
height: 150px;
width: 300px;
margin: 40px;
border-color: #594380;
border-style: solid;
border-width: 2px 0px;
background: rgba(252, 252, 252, 0.5);
box-shadow: inset -20px 0px 0px #594380, 2px 3px 3px rgba(0,0,0,0.3);
}
.shape:before,
.shape:after {
position: absolute;
content: '';
top: -2px;
width: 30px;
height: 100%;
border: 2px solid #594380;
}
.shape:before {
left: -32px;
border-right: none;
background: rgba(252, 252, 252, 0.5);
-webkit-transform-origin: right 50%;
-moz-transform-origin: right 50%;
transform-origin: right 50%;
-webkit-transform: perspective(15px) rotateY(-10deg);
-moz-transform: perspective(15px) rotateY(-10deg);
transform: perspective(15px) rotateY(-10deg);
box-shadow: inset 2px 0px 0px #594380, inset 0px -1px 0px #594380, inset 0px 1px 0px #594380;
}
.shape:after {
right: -34px;
background: #594380;
-webkit-transform-origin: left 50%;
-moz-transform-origin: left 50%;
transform-origin: left 50%;
-webkit-transform: perspective(15px) rotateY(10deg);
-moz-transform: perspective(15px) rotateY(10deg);
transform: perspective(15px) rotateY(10deg);
box-shadow: inset -2px 0px 0px #594380, inset 0px -1px 0px #594380, inset 0px 1px 0px #594380, 6px 2px 5px 3px rgba(0,0,0,0.3);
}
span {
position: absolute;
right: 0px;
top: 12px;
display: block;
height: 20px;
width: 100px;
text-align: center;
text-transform: uppercase;
color: white;
-webkit-transform-origin: right;
-moz-transform-origin: right;
transform-origin: right;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
z-index: 2;
}
body {
background: url(http://lorempixel.com/500/500);
}
<div class="shape">
Lorem ipsum dolor sit amet...
<span>legislative</span>
</div>
Note: There will be a slight misalignment of the borders on the left side when we look at it very closely but it is a barely noticeable glitch. The idea of posting this answer is to give an idea for future readers.
Other methods to get Octagon Shapes:
- This CodePen contributed by jbutler483 has a sample achieved using a different method. Like the above snippet, this also has a very small glitch wherein the angled borders on left side is a bit thin because of the use of skew transforms.
- If the need is for a transparent regular octagon shape, the method used in the below snippet can be adopted. This is not all that useful when dealing with semi transparent shapes (as can be seen with the second sample). Note that positioning text within the shape needs to be handled separately.
.shape,
.octagon,
.shape:before,
.shape:after {
border-top: 2px solid steelblue;
border-bottom: 2px solid steelblue;
}
.shape {
height: -webkit-calc(141.44px + 100px); /* width * sin(135) * 2 + width */
height: -moz-calc(141.44px + 100px);
height: calc(141.44px + 100px);
width: 100px;
position: relative;
margin: 40px 80px;
}
.shape:after,
.shape:before,
.octagon {
position: absolute;
height: 100%;
width: -webkit-calc(100% + 2px);
width: -moz-calc(100% + 2px);
width: calc(100% + 2px);
}
.shape:before,
.shape:after {
content: '';
top: -2px;
left: -2px;
}
.octagon {
top: -2px;
left: -2px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
.shape:before {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
transform: rotate(135deg);
}
.shape:after {
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.semi-transparent, .semi-transparent .octagon, .semi-transparent.shape:after, .semi-transparent.shape:before{
background: rgba(1, 1, 1, 0.5);
}
body {
background: -webkit-linear-gradient(90deg, crimson, indianred, purple);
background: -moz-linear-gradient(90deg, crimson, indianred, purple);
background: linear-gradient(90deg, crimson, indianred, purple)
}
body > div{
display: inline-block;
}
<div class="shape">
<div class="octagon"></div>
</div>
<div class="shape semi-transparent">
<div class="octagon"></div>
</div>
这篇关于如何制作八角形盒子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
