How can I make an octagon shaped box?
I want to create the below box using CSS.
I have searched a lot and read very good articles like https://css-tricks.com/examples/ShapesOfCSS/ but I am stuck with one problem - purple edge cutting edges. I tried octagonal shape but it doesn't work for this case.
I almost achieved it. Here's 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 screenshot of work
+3
source to share
3 answers
please check this solution, finally i did it
I am adding a box-inner div to make this possible.
check script
`http://jsfiddle.net/maverickabhi/qfthejb2/`
.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);
}
.box-inner {
content: "";
position: absolute;
top: -2px;
left: -1px;
border-bottom: 30px solid transparent;
border-right: 29px solid #F1F0F0;
border-top: 29px solid transparent;
height: 63%;
width: 0;
}
<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 class="box-inner"></div>
</div>
<!--box outer-->
+3
source to share
Here is an alternative method using CSS3 transforms to achieve the shape of an octagon as well as transparency within it. When using this method, the background does not have to be a solid color. It can be an image or a gradient.
The form essentially consists of the following:
- A container with a top border, bottom border, and an inset shadow on the right side. (Green colored area below screenshot * )
- A pseudo-element on the left side with the same height as the container, which is rotated with perspective using transformations. (Blue colored area below screenshot * )
- Another pseudo-element on the right side that rotates in the opposite direction of the element on the left. (Red area in the photo below * )
- The inset-drop shadow on the container matches the background of the pseudo-element on the right (so it looks like only half of it is skewed).
- Additional shadows around the parent container and a pseudo element on the right side to provide a shadow for the entire shape.
* - different colors are used only to illustrate the shape of the form.
.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. ... If we look at it very closely, there will be a slight border inconsistency on the left side, but this is a subtle glitch. The idea behind posting this answer is to give an idea to future readers.
Other methods for getting Octagon shapes:
- This CodePen provided by jbutler483 has a sample obtained using a different method. Like the snippet above, this also has a very small glitch in which the corner borders on the left side are a bit thin due to the use of skewed transforms.
- If a transparent regular octagon shape is needed, the method used in the snippet below can be adopted. This is not all that is useful when working with semi-transparent shapes (as you can see with the second sample). Note that the positioning of the text within the form 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>
+3
source to share
Here is the svg solution.
Unfortunately it uses some hard-coded numbers for the size.
I find vertical text is much easier to do in svg, since you can just rotate it 90deg and it works.
The main element is two polygons. It is considered using a gradient for the background of the elements, but select this because it is easier to understand what is happening with the shapes.
The text element is executed with a div and sets it absolute with fixed dimensions. I find it can be done better, but couldn't think of a better solution at the top of my head.
.box div{
position: absolute;
margin-left: 70px;
margin-right: 100px;
margin-top: 5px;
width: calc(600px - 70px - 100px);
}
.ticket .content {
stroke: rgb(100, 0, 100);
stroke-width: 2px;
fill: #fff;
}
.ticket .end {
stroke: rgb(100, 0, 100);
stroke-width: 2px;
fill: rgb(100, 0, 100);
}
.ticket #vertical {
fill: #fff;
}
<div class="box">
<div>lorem ipsum dolar si amet lorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si amet</div>
<svg class="ticket" height="300px" width="600px" viewbox="-1 -1 202 102">
<polygon class="content" points=" 0 20, 20 0, 170 0, 170 100, 20 100, 0 80" />
<polygon class="end" points="170 0, 180 0, 200 20, 200 80, 180 100, 170, 100" />
<text id="vertical" transform="translate(185 93) rotate(-90)">Golden ticket</text>
</svg>
</div>
+2
source to share