I'm trying to create an image inside a rounded cornered hexagon, where that image would act as a header of longer hexagon to display profile/biography information. The hexagon would also have a border.
I've researched, and while I was able to find a how-to on how to put an image in a hexagon and how to make a rounded cornered hexagon like it is available here (which is the shape i want except it's rotated) http://codepen.io/thebabydino/details/gFxzt I can't seem to be able to merge the two concepts together, probably because they're different.
Could someone help me please.
This is what I've come up with so far which is not really what i want.
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
Here's my jsfiddle.
Bonus points for responsiveness.
If your image has a fixed background color you can use this pen, it's a fork of thebabydino's hexagon:
http://codepen.io/rafaelcastrocouto/pen/mAPjRP
If it's not, you can use SVG path
http://codepen.io/rafaelcastrocouto/pen/vXGamL
.clip-polygon {
-webkit-clip-path: url("#hex");
clip-path: url("#hex");
}
<div class="clip-wrap">
<img src="https://placeholdit.imgix.net/~text?txtsize=30&bg=ff6347&txtclr=ffffff&txt=Image&w=140&h=140" alt="demo-clip-path" width="140" height="140" class="clip-polygon">
</div>
<svg height="0" width="0">
<defs>
<clipPath id="hex">
<path d="M59 2.8867513459481a10 10 0 0 1 10 0l45.425625842204 26.226497308104a10 10 0 0 1 5 8.6602540378444l0 52.452994616207a10 10 0 0 1 -5 8.6602540378444l-45.425625842204 26.226497308104a10 10 0 0 1 -10 0l-45.425625842204 -26.226497308104a10 10 0 0 1 -5 -8.6602540378444l0 -52.452994616207a10 10 0 0 1 5 -8.6602540378444"></path>
</clipPath>
</defs>
</svg>
Related
This question already has answers here:
How to make a curved edge hexagon by using CSS
(6 answers)
Closed last year.
This post was edited and submitted for review last year and failed to reopen the post:
Original close reason(s) were not resolved
I'm working on a small project by myself. I want to make the edges of that hexagonal pfp round.
The code:
.hex img {
width: 50px;
height: 50px;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(0% 50%, 25% 100%, 75% 100%, 100% 50%, 75% 0%, 25% 0%);
object-fit: cover;
}
I've tried using border-radius, but little did I know that it would only make the sides of that hexagon round.
I'm trying to get something like this.
How do I make it like that?
Curved Path
I suggest that you use an SVG path with rounded corner:
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
It should look like this (this is a heart shape as an example):
.hex img {
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
}
Here's the documentation concerning paths:
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
You can also create the path with a vector editing software like Illustrator, or directly only with tools like this: https://yqnn.github.io/svg-path-editor/
SVG filter
Another solution would be to use SVG filters. Although it may look "simpler" I strongly suggest that you use curved paths (the solution I mentioned earlier) for performance and readability.
You can declare a filter that will smooth corners like that:
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="round">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" 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>
Then, you just need to use the filter CSS property
.hex::before {
content:"";
display:block;
padding-top:86.6%;
background:red;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.hex {
width: 100px;
height: 100px;
filter: url(#round)
}
source: https://dev.to/afif/css-shapes-with-rounded-corners-56h
I'm new at animating SVGs with CSS and I'm trying to create a "blinking eye" effect. This is what I've managed to do:
https://codepen.io/pablo-m/pen/jOGeMpJ.
(Edit 3: Code added)
SVG
<svg id="composicion" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 571.8 761.82">
<g id="Ojito">
<rect x="190.37" y="288.55" width="192.7" height="91.76" fill="#606060" />
<ellipse id="outer-eye" cx="292.3" cy="335.43" rx="44.72" ry="30.01" fill="#3caa56" />
<circle id="inner-eye" cx="291.69" cy="334.82" r="18.38" fill="#efefef" />
</g>
</svg>
SCSS
#composicion {
#Ojito {
#keyframes inner-eye-blink {
0%,
82%,
95%,
100% {
clip-path: ellipse(75% 55%);
}
90% {
clip-path: ellipse(75% 0);
}
}
#keyframes outer-eye-blink {
0%,
80%,
100% {
ry: 30.01px;
}
90% {
ry: 1px;
}
}
& #outer-eye {
animation: outer-eye-blink 8s ease infinite;
}
& #inner-eye {
animation: inner-eye-blink 8s infinite;
}
}
}
The animation works great on Firefox v95.0.2 and Safari v15.1. However, on Chrome/Chromium v97.0.4692.71 (as of today, the latest version) it does not. It looks like, whenever I apply a clip-path with css the white circle dissapears. I also noticed that this behaviour does not happen on Chrome/Chromium v96.0.4664.93. Am I doing something wrong or did something change in the latest version of Chrome/Chromium? Edit: If I did everything correctly, does anyone know a workaround?
This is my first question in SO, so please let me know if I missed any detail.
Thanks!
Edit: I have looked at Chromium's bug tracker but I've not found any relevant issues there.
Edit 2: Chromium bug reported
In a situation like this it is a good idea to use either a clip-path or a mask because you have more elements that need to be animated/masked off. In this example I chose CSS clip-path because you started off with the animation in CSS.
My example works fine in Chrome 97 as I see it.
Another option would be to use SVG animation with SMIL. I would expect it to work in Chrome as well. In some cases it is more flexible then mask or clip-path in CSS.
I used SvgPathEditor for constructing the path.
#keyframes eye-blink {
0%,
100% {
clip-path: path('M 3 5 C 6 6 9 7 13 5 C 9 2 6 3 3 5');
}
50% {
clip-path: path('M 3 5 C 6 5 9 5 13 5 C 9 5 6 5 3 5');
}
}
#Ojito g {
clip-path: path('M 3 5 C 6 6 9 7 13 5 C 9 2 6 3 3 5');
animation: eye-blink 4s ease infinite;
}
<svg id="composicion" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 10" width="400">
<g id="Ojito">
<rect width="16" height="10" fill="#606060" />
<g>
<rect width="16" height="10" fill="white" />
<circle id="inner-eye" cx="8" cy="4.8" r="2" fill="#333" />
<circle id="inner-eye" cx="8" cy="4.8" r="1.2" fill="black" />
</g>
</g>
</svg>
It looks like it's a Chrome bug indeed. However, I managed to find a workaround which solves the issue: https://codepen.io/pablo-m/pen/WNZYeoB
SCSS
#composicion {
#Ojito {
#keyframes inner-eye-move {
0%,
5%,
20%,
25%,
40%,
45%,
50%,
60%,
65%,
80%,
85%,
100% {
cx: 291.69px;
cy: 334.82px;
}
10%,
15% {
cx: 273.69px;
cy: 328.82px;
}
30%,
35% {
cx: 291.69px;
cy: 342.82px;
}
70%,
75% {
cx: 310.69px;
cy: 328.82px;
}
90%,
95% {
cx: 307.69px;
cy: 338.82px;
}
}
#keyframes outer-eye-blink {
0%,
80%,
100% {
ry: 30.01px;
}
90% {
ry: 1px;
}
}
& .outer-eye {
animation: outer-eye-blink 8s ease infinite;
}
& #inner-eye {
clip-path: url(#eyeClip);
animation: inner-eye-move 50s ease infinite;
}
}
}
SVG
<svg id="composicion" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 571.8 761.82">
<g id="Ojito">
<rect x="190.37" y="288.55" width="192.7" height="91.76" fill="#606060" />
<clipPath id="eyeClip">
<ellipse class="outer-eye" cx="292.3" cy="335.43" rx="44.72" ry="30.01" />
</clipPath>
<ellipse class="outer-eye" cx="292.3" cy="335.43" rx="44.72" ry="30.01" fill="#3caa56" />
<circle id="inner-eye" cx="291.69" cy="334.82" r="18.38" fill="#efefef" />
</g>
</svg>
I'll edit my question and answer when I post the bug on the Chrome bug tracker.
Edit: Chromium bug reported
Edit 2: For another great workaround, please look at #chrwahl's answer
I have created a right pointing content box using css clip-path polygon, It works well inside chrome, For firefox I have added Inline SVG, but still it is not working.
Here is work in progress link
Link
Here is the markup and code I used for creating the right pointing content box
HTML :
<svg width="0" height="0">
<defs>
<clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
<polygon points="0 0, 0.95 0, 1 0.5, 0.95 1, 0 1" />
</clipPath>
</defs>
</svg>
<div class="application-content">
<h3>clip-path is not working in firefox</h3>
<p>Hi, I have created a right pointing content box using css clip-path polygon, It works well inside chrome, For firefox I have added Inline SVG, but still it is not working.</p>
</div>
CSS:
.application-content{
width:35%;
-webkit-clip-path: polygon(0% 0%, 95% 0, 100% 50%, 95% 100%, 0% 100%);
clip-path: polygon(0% 0%, 95% 0, 100% 50%, 95% 100%, 0% 100%);
clip-path: url("#clip-shape");
background-color:#f5f5f5;
padding:30px;
}
I don't know, where it is going wrong.
Interesting thing here is, The above code is working when used with jsfiddle or codepen. I am using latest version of wordpress with a custom code theme.
Here is the codepen link
I am trying to create a triangle using internal and external SVG.
However for some reason it won't work.
I tried to use this tool here: http://cssplant.com/clip-path-generator
and get it's "POINTS" coordinates to create a perfect clip TRIANGLE on my internal and external SVG but no luck.
Here's my HTML:
<figure class="clip-holder">
<img src="https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpg" class="clip-svg-inline" width="200" height="200">
<figcaption>Inline SVG</figcaption>
</figure>
<figure class="clip-holder">
<img src="https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpg" width="200" height="200">
<figcaption>External SVG</figcaption>
</figure>
</div>
<svg class="clip-svg">
<defs>
<clipPath id="triangle" clipPathUnits="objectBoundingBox" >
<polygon points="120 263,325 262,222 42"/>
</clipPath>
</defs>
</svg>
And here's the CSS:
.clip-holder {
display: inline-block;
padding: 0;
margin: 30px;
}
.clip-css {
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.clip-svg {
width: 0;
height: 0;
margin: 0 auto;
}
.clip-svg-inline {
-webkit-clip-path: url("#triangle");
clip-path: url("#triangle");
}
.clip-svg-external {
-webkit-clip-path: url("https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpgt");
clip-path: url("https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpg");
}
Am i making any mistakes?
Here's the JSFIDDLE: https://jsfiddle.net/stjtudvj/
(show me jsfiddle solution for better understanding)
The actual value of the clip-path property has to be an SVG clipPath. It can never be an image (like a JPG). It always to be the actual shape that should be applied on your image.
For example these are clipPath elements: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/clip-path#Grundformen_.28basic_shapes.29.
There is an example too, which pretty much looks like what you try to accomplish: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/clip-path#Anwendungsbeispiel.
So basically you apply a your predefined shape (e.g. by using your linked generator) to an image using the CSS-property clipPath (which describes the shape). Like this:
HTML
<img src="/path/to/my/image.jpg" id="triangle" />
CSS
img#triangle {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
You can use the clip-path property to supply an actual shape (like I mentioned above) or via url(). Latter is pointing either to an existing SVG in the DOM ("internal SVG") or to an actual URL containing an SVG ("external SVG").
An example you can find here: http://codepen.io/imohkay/pen/GJpxXY
Based on that example I updated your fiddle: https://jsfiddle.net/stjtudvj/2/
I fixed the inline #triangle SVG. Your values were exceeding the image dimensions.
Please keep in mind, that not all browsers support this property fully yet: http://caniuse.com/#search=clip-path
I'm wanting to have a diagonal line drawn from the upper-right corner of a <div> or <span> to the lower-left corner. The problem is that the content will sometimes be longer or shorter. So, something like a static image won't work. Basically I want what's described here (How to create a diagonal line within a table cell?) but for a <div> or a <span>.
This has some interesting ideas: http://jsfiddle.net/zw3Ve/11/
So does this: http://css-tricks.com/forums/discussion/13384/diagonal-line/p1
This is kind of a retry at this post: How to strike through obliquely with css
I can't seem to figure any of this out though. It seems like a pure CSS solution should work here, but I just don't have the skills to make that happen. jQuery is an option for me as well.
You can do this with an inline SVG background, using only CSS and no javascript.
.background {
// Draw an SVG top left to bottom right
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 10 10'> <path d='M0 0 L0 10 L10 10' fill='red' /></svg>");
background-repeat:no-repeat;
background-position:center center;
//scale it
background-size: 100% 100%, auto;
}
See my fiddle:
http://jsfiddle.net/3GWw2/
Is first fiddle as example with image in background instead not good enough?
http://jsfiddle.net/zw3Ve/410/
.line {
display:inline-block;
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
background:url(http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png);
background-size:100% 100%;
}
You can do this with linear-gradient. For example if I want a green and white square that cuts diagonally from bottom left to top right, I give it this background attribute:
background: linear-gradient(to bottom right, white, white 50%, green 50%, green);
This means that it starts as white at the top left corner and continues as white all the way to the diagonal line. The transition is immediately from white to green with no actual gradient as both are set at 50%. If you want a gray line between, you could try this:
background: linear-gradient(to bottom right, white, white 48%, gray 48%, gray 52%, green 52%, green);
You might use an SVG image like this one:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="200px" height="50px" viewBox="0 0 200 50">
<line fill="none" stroke="#000" x1="0" y1="0" x2="200" y2="50"/>
</svg>
Set it as background of your span or div
.class-of-div-or-span { background: url("line.svg") no-repeat scroll 0 0 / 100% 100% transparent; }
Note: you have to give your span display:block or display:inline-block in order to work.
You could also inline the svg, use it in an object tag or embed it in your css.
Actually this is more of a question about geometry than coding. With squares this is easy, but with rectangles you'll have to do the math yourself. Remember those kids complaining that they'll never have to calculate a diagonal's length in "real life"? :P
Here's what I did:
div.container /*makes a square container (300x300)*/
{
width: 300px;
height: 150px;
background-color: #aaa;
padding-top: 150px;
}
div.line
{
position: relative;
z-index: 1;
left: -61px; /*this is something I don't understand but apparently is required*/
width: 423px; /*since container is a square this equals to its diagonal: 300*1.41*/
height: 1px;
background-color: #000;
transform: rotate(45deg); /*again, this is easy since its a square. In rectangle you'll have to find a tangent*/
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
HTML:
<div class="container">
<div class="line"></div>
</div>
and a jsfiddle: http://jsfiddle.net/LWAKn/