I hope you can help me. I have this idea to create 3 divs with different shapes. 1st triangle 2nd rhombus 3rd triangle. When putting together they make one rectangle. I created 3 div figures but have a problem putting them together. I will appreciate your help.
Note: I have tried flex but then the main div is separated into 3 parallel sections.
HTML
.triangle {
width: 80%;
height: 300px;
border: 2px solid black;
margin: 20px auto;
background: grey;
}
.triangle .figure_1 {
width: 50%;
display: inline-flex;
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
background: green;
}
.triangle .figure_2 {
width: 100%;
clip-path: polygon(0% 0%, 50% 100%, 100% 100%, 50% 0%);
background: yellow;
}
.triangle .figure_3 {
width: 50%;
clip-path: polygon(0% 0%, 100% 100%, 100% 0%);
background: red;
}
<div id="triangle" class="triangle">
<div id="figure_1" class="figure_1">
</div>
<div id="figure_2" class="figure_2">
</div>
<div id="figure_3" class="figure_3">
</div>
</div>
Try to make your triangle as relative and figure as absolute
.triangle {
width: 80%;
height: 300px;
border: 2px solid black;
margin: 20px auto;
background: grey;
position: relative;
}
.triangle .figure_1 {
width: 50%;
display: inline-flex;
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
background: green;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.triangle .figure_2 {
width: 100%;
clip-path: polygon(0% 0%, 50% 100%, 100% 100%, 50% 0%);
background: yellow;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.triangle .figure_3 {
width: 50%;
clip-path: polygon(0% 0%, 100% 100%, 100% 0%);
background: red;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div id="triangle" class="triangle">
<div id="figure_1" class="figure_1">
</div>
<div id="figure_2" class="figure_2">
</div>
<div id="figure_3" class="figure_3">
</div>
</div>
Related
I have the following problem. I have created an Hexagon that has a coloured border and I would like to place an image or SVG inside the hexagon, and the problem is that I cant figure out how to make the image not go on top of the borders.
.App {
background: black;
min-height: 100vh;
width: 100%;
overflow: hidden;
}
.gridComponent {
margin-top: 35px;
display: grid;
justify-content: center;
gap: 2rem;
}
.hexagon {
position: relative;
height: 600px;
width: 339px;
background: rgb(89, 90, 145);
}
.hexagon:before {
position: absolute;
content: "";
top: 10px;
left: 10px;
height: calc(100% - 20px);
width: calc(100% - 20px);
background: #1e40af;
overflow: hidden;
}
.hexagon,
.hexagon:before {
-webkit-clip-path: polygon(50% 0, 100% 10%, 100% 90%, 50% 100%, 0 90%, 0 10%);
clip-path: polygon(50% 0, 100% 10%, 100% 90%, 50% 100%, 0 90%, 0 10%);
}
.topContainer {
position: relative;
width: 339px;
height: 300px;
}
.topContainer:before {
position: absolute;
content: "";
top: 10px;
left: 10px;
height: calc(100% - 20px);
width: calc(100% - 20px);
background: green;
}
.topContainer,
.topContainer:before {
-webkit-clip-path: polygon( 50% 0, 100% 20%, 100% 100%, 50% 100%, 0 100%, 0 20%);
clip-path: polygon(50% 0, 100% 20%, 100% 100%, 50% 100%, 0 100%, 0 20%);
}
.logoVitality {
position: absolute;
width: 212.06px;
height: 257.19px;
top: 1%;
right: 69%;
overflow: hidden;
}
.anon{
position:absolute;}
.divider {
position: absolute;
width: 339px;
height: 10px;
top: 289.5px;
background: black;
}
.bottomContainer {
position: relative;
width: 339px;
height: 300px;
}
.bottomContainer:before {
position: absolute;
content: "";
}
.bottomContainer,
.bottomContainer:before {
-webkit-clip-path: polygon(50% 100%, 100% 81%, 100% 0, 50% 0, 0 0, 0 81%);
clip-path: polygon(50% 100%, 100% 81%, 100% 0, 50% 0, 0 0, 0 81%);
}
.bottomContainer:before {
top: 0px;
left: 10px;
height: calc(100% - 10px);
width: calc(100% - 20px);
background: grey;
}
<div class="App">
<div class="gridComponent">
<div class="hexagon">
<div class="topContainer">
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/NewTux.svg/640px-NewTux.svg.png"class="logoVitality"/>
<div class="divider"></div>
<div class="bottomContainer"></div>
</div>
</div>
</div>
I have this codesandbox where you can see the issue. https://codesandbox.io/s/focused-hooks-19rrjj?file=/src/styles.css and I would like to get the image that is outside of the hexagon to be behind the border, I but just could not find a solution. I tried using z-index and playing around with the positions, but I could not figure out.
Thank you for your help!
I'm trying to create transparent div full width and height around 500px using borders but i have trouble with creating this kind of curved shape.
It should look like on the example image, the yellow shape.
.transparent_bg {
width: 100%;
height: 485px;
background: transparent;
border:solid 5px #000;
border-color:#000 transparent transparent transparent;
border-radius: 50%/200px 200px 0 0;
transform: rotate(180deg);
position: relative;
overflow:hidden;
}
.transparent_bg:after {
content: "";
width: 100%;
height: 485px;
position: absolute;
top: 0;
background: red;
}
<div class="transparent_bg"></div>
I have included a link to my work until this moment but without success.
You can use clip path in both ways (on the top element or the bottom one) and simply make top and bottom to overlay like this :
.first,
.second {
display: inline-block;
margin: 5px;
}
.first .top {
clip-path: circle(72.9% at 50% 27%);
height: 200px;
width: 200px;
background: url(https://picsum.photos/id/10/800/800) center/cover;
position: relative;
}
.first .bottom {
margin-top: -70px;
background: yellow;
height: 100px;
width: 200px;
}
.second .top {
height: 200px;
width: 200px;
background:url(https://picsum.photos/id/10/800/800) center/cover;
position: relative;
}
.second .bottom {
clip-path: polygon(0 25%, 14% 41%, 28% 51%, 49% 54%, 66% 53%, 79% 48%, 89% 39%, 100% 27%, 100% 100%, 47% 100%, 0% 100%);
margin-top: -70px;
background: yellow;
height: 100px;
width: 200px;
}
<div class="first">
<div class="top">
</div>
<div class="bottom">
</div>
</div>
<div class="second">
<div class="top">
</div>
<div class="bottom">
</div>
</div>
Here is a useful link to generate path :
https://bennettfeely.com/clippy/
Here is another idea using radial-gradient
.first {
height: 200px;
width: 400px;
background:
radial-gradient(100% 100% at top, #0000 60%, yellow 61%),
url(https://picsum.photos/id/10/800/800) center/cover;
}
<div class="first">
</div>
Using mask if you want transparency:
.first {
height: 200px;
width: 400px;
background: url(https://picsum.photos/id/10/800/800) center/cover;
-webkit-mask:radial-gradient(100% 100% at top, #fff 60%, #0000 61%);
mask:radial-gradient(100% 100% at top, #fff 60%, #0000 61%);
}
.bottom {
-webkit-mask:radial-gradient(100% 100% at top, #0000 60%, #fff 61%);
mask:radial-gradient(100% 100% at top, #0000 60%, #fff 61%);
}
body {
background:yellow;
}
<div class="first">
</div>
<div class="first bottom">
</div>
If you want to overlay top and bottom, just use clip path both ways (on the top or bottom element).`
.transparent_bg {
width: 100%;
height: 485px;
background: transparent;
border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
transform: rotate(180deg);
position: relative;
overflow:hidden;
}
.transparent_bg:after {
content: "";
width: 100%;
height: 485px;
position: absolute;
top: 0;
background: red;
}
.transparent_bg {
width: 100%;
height: 485px;
background: transparent;
border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
transform: rotate(180deg);
position: relative;
overflow:hidden;
}
.transparent_bg:after {
content: "";
width: 100%;
height: 485px;
position: absolute;
top: 0;
background: red;
}
<div class="transparent_bg"></div>
I am trying to clip a triangle inside a div .box-inner-2 and mask the outside of that to look like:
but what I am getting now is this. Can you please let me know how to do this?
.wrapper{
position: relative;
height: 250px;
width: 250px;
}
.box-inner-1{
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
}
.box-inner-2{
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
clip-path: polygon(10% 0, 0 20%, 20% 20%);
}
<div class="wrapper">
<div class="box-inner-1"></div>
<div class="box-inner-2"></div>
</div>
So here is a brief of what I changed in your code:
Moved the triangle clip-path: polygon(10% 0, 0 20%, 20% 20%) to the box-inner-1 (adjusted top and left for illustration)
Added an inset clip-path to the box-inner-2 and a psuedo after element to clip the triangle.
See demo below:
.wrapper {
position: relative;
height: 250px;
width: 250px;
border: 2px solid;
}
.wrapper:after {
content: '';
clip-path: inset(0% 94% 0% 0%);
background: #fff;
display: block;
height: 100%;
}
.box-inner-1 {
position: absolute;
top: 10px;
left: 10px;
right: 0;
bottom: 0;
background-color: red;
clip-path: polygon(10% 0, 0 20%, 20% 20%);
}
.box-inner-2 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
clip-path: inset(0% 0% 93% 0%);
}
<div class="wrapper">
<div class="box-inner-1"></div>
<div class="box-inner-2"></div>
</div>
I want to 'cut' my page on two sides, something like this:
http://i.stack.imgur.com/ngZrp.jpg
DEMO: https://jsfiddle.net/r2g0eyxf/3/
#left {
background: url(https://static.pexels.com/photos/24353/pexels-photo.jpg);
width: 50%;
position: absolute;
left: 0px;
height: 100%;
}
#right {
background: url(http://media.caranddriver.com/images/media/51/25-cars-worth-waiting-for-lp-ferrari-488gtb-photo-658256-s-original.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
}
But:
I need this images responsive
I want to create this 'slash'
How can I do this?
EDIT
This not solving my problem - I need it on full page and without space between images.
An hint would be to use transform and some padding.
average example
body {
margin: 0;
padding: 0;
width:100%;
overflow-x:hidden;
color:turquoise;
text-shadow:0 0 white;
font-size:2em;
}
#left {
position: absolute;
left: -10%;
height: 100%;
}
#left,
#right {
width: 60%;
transform: skew(-15deg);
overflow: hidden;
}
#left .content {
background: url(https://static.pexels.com/photos/24353/pexels-photo.jpg);
height: 100%;
}
#right .content {
height: 100%;
background: url(http://media.caranddriver.com/images/media/51/25-cars-worth-waiting-for-lp-ferrari-488gtb-photo-658256-s-original.jpg);
}
#right {
position: absolute;
right: -10%;
height: 100%;
}
#left .content,
#right .content{
width: 100%;
padding: 0 20%;
margin: 0 -15%;
transform: skew(15deg);
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
}
<div id="left">
<div class="content">Content here</div>
</div>
<div id="right">
<div class="content">Content here</div>
</div>
You could use clip-path, support.
.clipped-img {
position: relative;
}
.clipped-img img {
position: absolute;
width: 50%;
}
.clipped-img img:nth-child(1) {
-webkit-clip-path: polygon( 0% 0, 100% 0, 80% 100%, 0 100% );
clip-path: polygon( 0% 0, 100% 0, 80% 100%, 0 100% );
}
.clipped-img img:nth-child(2) {
right: 10%;
-webkit-clip-path: polygon( 20% 0, 100% 0, 100% 100%, 0 100% );
clip-path: polygon( 20% 0, 100% 0, 100% 100%, 0 100% );
}
<div class="clipped-img">
<img src="http://placehold.it/500x300/FC0/">
<img src="http://placehold.it/500x300/CC0/">
</div>
I am trying to take this css Octagon and give it a solid red border. However, when i add the border it only works on portion of the shape. Does anyone have a solution for this?
Here is a JS FIDDLE
HTML
<div class='octagonWrap'>
<div class='octagon'></div>
</div>
CSS
.octagonWrap{
width:200px;
height:200px;
float: left;
position: relative;
}
.octagon{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
}
.octagon:before {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
transform: rotate(45deg);
background: #777;
content: '';
border: 3px solid red;
}
You can modify your own code to work with this. Right now, you have rules for .octagon that should be for .octagon-wrapper, and rules for .octagon::before that should be for .octagon. Just shift the CSS rules and have them apply to their parents, while changing the border property of .octagon::before to inherit from .octagon.
.octagonWrap {
width:200px;
height:200px;
float: left;
position: relative;
overflow: hidden;
}
.octagon {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
transform: rotate(45deg);
background: #777;
border: 3px solid red;
}
.octagon:before {
position: absolute;
/* There needs to be a negative value here to cancel
* out the width of the border. It's currently -3px,
* but if the border were 5px, then it'd be -5px.
*/
top: -3px; right: -3px; bottom: -3px; left: -3px;
transform: rotate(45deg);
content: '';
border: inherit;
}
<div class='octagonWrap'>
<div class='octagon'></div>
</div>
SVG solution
I do not know if using svg is an option,
If it is here is how simple it is done.
<svg viewBox="0 0 75 75" width="200px">
<path d="m5,22 18,-18 28,0 18,18 0,28 -18,18, -28,0 -18,-18z" stroke="red" stroke-width="2" fill="black" />
</svg>
You could use an online calculator (or calculate it manually) to compute the size in which the ratio of the side, and overall height needs to be.
Then by using some pseudos and a span element, you could create this shape via:
.oct {
height: 241px;
width: 100px;
background: none;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-top: 10px solid tomato;
border-bottom: 10px solid tomato;
margin: 100px auto;
transition: all 0.8s;
}
.oct:before,
.oct:after,
.oct span {
content: "";
position: absolute;
height: inherit;
width: inherit;
background: inherit;
-webkit-box-sizing: inherit;
box-sizing: inherit;
border: inherit;
top: -10px;
z-index:-1;
}
.oct:before {
left: -100%;
transform: rotate(-45deg);
transform-origin: top right;
}
.oct:after {
left: 100%;
transform: rotate(45deg);
transform-origin: top left;
}
.oct span {
height: inherit;
width: inherit;
background: inherit;
transform: rotate(90deg);
}
.oct:hover {
transform: rotate(180deg);
}
<div class="oct">
<span></span>
</div>
You can do that very effectively with clip-path
.octagonWrap {
background: red;
width: 200px;
height: 200px;
position: absolute;
-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.octagon {
position: relative;
background: gray;
width: 190px;
height: 190px;
top: 5px;
left: 5px;
-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
<div class="octagonWrap">
<div class='octagon'></div>
</div>
Imagine those red lines extending until they touch each other. That square (rotated 45%) has a complete border, you just don't see the "cut off" corners due to the overflow: hidden;
This seems to work (but does so by adding two extra divs, so there may be a better way):
<div class='octagonWrap'>
<div class='octagon'></div>
<div class='vert'> </div>
<div class='hort'> </div>
</div>
and then add tihs css:
.vert {
position: absolute;
left: 60px;
border-top: 3px solid red;
border-bottom: 3px solid red;
height: 194px;
width: 80px;
}
.hort {
position: absolute;
top: 60px;
border-left: 3px solid red;
border-right: 3px solid red;
width: 94px;
height: 80px;
}
You should try using the HTML5 canvas element. You should be able to draw the polygon and then add a stroke to it.