How to make a curved edge hexagon by using CSS
I think you are looking for this.
.hex {
position: relative;
margin: 1em auto;
width: 10em;
height: 17.32em;
border-radius: 1em/.5em;
background: orange;
transition: opacity .5s;
}
.hex:before,
.hex:after {
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: '';
}
.hex:before {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.hex:after {
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
<div class="hex"></div>
Make hexagon shape with border, rounded corners and transparent background
Hexagon with rounded corners are complex shapes to create and I usually recommend using SVG for creating them. The need for a transparent background makes it even more better suited for SVG. With SVG you can get better control over the shape, its curves etc and you don't have to add a lot of extra (unnecessary) elements to your markup also.
All that is needed for creating this shape with SVG is to use a single path
element along with a few L
(line) and A
(arc) commands. The L
(line) command basically draws a line from point 1 to point 2 whereas the A
(arc) command draws an arc of the specified radius (the first two values immediately following the A
command).
You can read more about the SVG path
element and its commands in this MDN tutorial.
svg { height: 200px; width: 240px;}path { stroke: #777; fill: none;}
body { background: black;}
<svg viewBox='0 0 120 100'> <path d='M38,2 L82,2 A12,12 0 0,1 94,10 L112,44 A12,12 0 0,1 112,56 L94,90 A12,12 0 0,1 82,98 L38,98 A12,12 0 0,1 26,90 L8,56 A12,12 0 0,1 8,44 L26,10 A12,12 0 0,1 38,2' /></svg>
How to make a hexagonal SVG shape Rounded corner?
Use stroke-linejoin: round
in path to round corner
let max = 2160;
let progress = 80;
document.querySelector(".fill").setAttribute(
"style",
"stroke-dashoffset: " + ((100 - progress) / 100) * max
);
.user-avatar-holder{
background: #1D2333;
width: 500px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
margin: 25px auto;
clip-path: polygon(
47.5% 5.66987%,
48.2899% 5.30154%,
49.13176% 5.07596%,
50% 5%,
50.86824% 5.07596%,
51.7101% 5.30154%,
52.5% 5.66987%,
87.14102% 25.66987%,
87.85495% 26.16978%,
88.47124% 26.78606%,
88.97114% 27.5%,
89.33948% 28.2899%,
89.56505% 29.13176%,
89.64102% 30%,
89.64102% 70%,
89.56505% 70.86824%,
89.33948% 71.7101%,
88.97114% 72.5%,
88.47124% 73.21394%,
87.85495% 73.83022%,
87.14102% 74.33013%,
52.5% 94.33013%,
51.7101% 94.69846%,
50.86824% 94.92404%,
50% 95%,
49.13176% 94.92404%,
48.2899% 94.69846%,
47.5% 94.33013%,
12.85898% 74.33013%,
12.14505% 73.83022%,
11.52876% 73.21394%,
11.02886% 72.5%,
10.66052% 71.7101%,
10.43495% 70.86824%,
10.35898% 70%,
10.35898% 30%,
10.43495% 29.13176%,
10.66052% 28.2899%,
11.02886% 27.5%,
11.52876% 26.78606%,
12.14505% 26.16978%,
12.85898% 25.66987%
);
position: relative;
overflow: hidden;
}
.profile-image-outer{
background: #1D2333;
width: 360px;
height: 360px;
clip-path: polygon(
47.5% 5.66987%,
48.2899% 5.30154%,
49.13176% 5.07596%,
50% 5%,
50.86824% 5.07596%,
51.7101% 5.30154%,
52.5% 5.66987%,
87.14102% 25.66987%,
87.85495% 26.16978%,
88.47124% 26.78606%,
88.97114% 27.5%,
89.33948% 28.2899%,
89.56505% 29.13176%,
89.64102% 30%,
89.64102% 70%,
89.56505% 70.86824%,
89.33948% 71.7101%,
88.97114% 72.5%,
88.47124% 73.21394%,
87.85495% 73.83022%,
87.14102% 74.33013%,
52.5% 94.33013%,
51.7101% 94.69846%,
50.86824% 94.92404%,
50% 95%,
49.13176% 94.92404%,
48.2899% 94.69846%,
47.5% 94.33013%,
12.85898% 74.33013%,
12.14505% 73.83022%,
11.52876% 73.21394%,
11.02886% 72.5%,
10.66052% 71.7101%,
10.43495% 70.86824%,
10.35898% 70%,
10.35898% 30%,
10.43495% 29.13176%,
10.66052% 28.2899%,
11.02886% 27.5%,
11.52876% 26.78606%,
12.14505% 26.16978%,
12.85898% 25.66987%
);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.profile-image{
background: #1D2333;
width: 340px;
height: 340px;
clip-path: polygon(
47.5% 5.66987%,
48.2899% 5.30154%,
49.13176% 5.07596%,
50% 5%,
50.86824% 5.07596%,
51.7101% 5.30154%,
52.5% 5.66987%,
87.14102% 25.66987%,
87.85495% 26.16978%,
88.47124% 26.78606%,
88.97114% 27.5%,
89.33948% 28.2899%,
89.56505% 29.13176%,
89.64102% 30%,
89.64102% 70%,
89.56505% 70.86824%,
89.33948% 71.7101%,
88.97114% 72.5%,
88.47124% 73.21394%,
87.85495% 73.83022%,
87.14102% 74.33013%,
52.5% 94.33013%,
51.7101% 94.69846%,
50.86824% 94.92404%,
50% 95%,
49.13176% 94.92404%,
48.2899% 94.69846%,
47.5% 94.33013%,
12.85898% 74.33013%,
12.14505% 73.83022%,
11.52876% 73.21394%,
11.02886% 72.5%,
10.66052% 71.7101%,
10.43495% 70.86824%,
10.35898% 70%,
10.35898% 30%,
10.43495% 29.13176%,
10.66052% 28.2899%,
11.02886% 27.5%,
11.52876% 26.78606%,
12.14505% 26.16978%,
12.85898% 25.66987%
);
position: relative;
overflow: hidden;
}
.profile-image img{
width: 100%;
height: 100%;
object-fit: cover;
}
.progress-bar {
position: absolute;
top: 50%;
background: transparent;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
margin-top: -5px;
}
.progress {
width: 100%;
height: 100%;
background: transparent;
}
.progress .track,
.progress .fill {
fill: rgba(0, 0, 0, 0);
stroke-width: 30;
transform: translate(75px, 685px) rotate(-90deg);
}
.progress .track {
stroke: #293249;
}
.progress .fill {
stroke: #5BD853;
stroke-linecap: round;
stroke-dasharray: 2160;
stroke-dashoffset: 2160;
transition: stroke-dashoffset 1s;
stroke-linejoin: round; /*Added this css*/
}
.progress.blue .fill {
stroke: #5BD853;
stroke-linejoin: round; /*Added this css*/
}
<div class="user-avatar-holder">
<div class="progress-bar">
<svg class="progress blue noselect" x="0px" y="0px" viewBox="0 0 776 628">
<path class="track" d="M723 314L543 625.77 183 625.77 3 314 183 2.23 543 2.23 723 314z"></path>
<path class="fill" d="M723 314L543 625.77 183 625.77 3 314 183 2.23 543 2.23 723 314z"></path>
</svg>
</div>
<div class="profile-image-outer">
<div class="profile-image">
<img src="https://images.pexels.com/photos/1025804/pexels-photo-1025804.jpeg?auto=compress&cs=tinysrgb&h=350" alt="Sample Image" width="500" height="500" >
</div>
</div>
</div>
Making a hexagon with a mask and border in css3
I would consider my previous answer where I will duplicate the shape to create the border:
.hex {
position:relative;
--s:200px;
width: 200px;
height:calc(0.866*var(--s));
}
.hex div {
filter: url('#goo');
position:absolute;
inset:0;
}
.hex div::before{
content: "";
position:absolute;
inset:0;
background:#000;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.hex div:nth-child(2)::before{
background:red;
inset:4px;
}
<div class="hex">
<div></div>
<div></div>
</div>
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
Related Topics
Change Div Order With CSS Depending on Device-Width
Why Does the Outer ≪Div≫ Here Not Completely Surround the Inner ≪Div≫
Why Do Absolute Elements Stack Up on Each Other Instead of Stacking One After the Other
Why the Content Is Not Covered by the Background of an Overlapping Element
How to Not Underline an Element in a Link
How to Expand Floated Child Div'S Height to Parent'S Height
Minimum and Maximum Value of Z-Index
How to Get HTML 5 Input Type="Date" Working in Firefox And/Or Ie 10
How Does Jquery Work When There Are Multiple Elements With the Same Id Value
How to Use Content-Disposition For Force a File to Download to the Hard Drive
Make Background Color Extend into Overflow Area
Overlay Opaque Div Over Youtube Iframe
How to Modify the Fill Color of an Svg Image When Being Served as Background Image
Why Can't I Have a Numeric Value as the Id of an Element