So far I have tried this, but the border is not showing here. How can I make this card responsive? should I use a media query?
Here is my CSS:
.shape {
width: 300px;
height: 96px;
position: relative;
}
.shape::before {
content: "";
border-radius: 10px;
width: 296px;
height: 92px;
display: block;
position: absolute;
top: 1px;
left: 1px;
z-index: -10;
}
.shape,
.shape::before {
-webkit-clip-path: polygon(100% 0, 100% 61%, 74% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% 61%, 74% 100%, 0 100%, 0 0);
}
Related
I'm trying to make the div tag circle .blad3 the yellow color invisible in the body background color dark blue, but the div remains visible in the body background. I tried with overflow hidden both in body and div and with z-index and background-image: linear-gradient(to bottom ,rgb(...)..%, rgb(...)..% ); tried but the div tag remains visible in the body. In the outline of the div it can be made invisible with z-index. I want to do it with CSS, in body background is a mystery to me.
html, body {
margin: 0;
background-color:rgb(6, 5, 70);
min-height: 90%;
font-size: 8px;
padding:30px 10px 50px;
}
.drawing {
position :relative;
width: 200em;
height: 100em;
margin: auto;
background-color: rgb(100,167,223);
outline: 1.5em solid rgb(56, 118, 29);
outline-offset: -1em;
z-index: 1;
}
.circle .kern{
position: absolute;
background-color: rgb(255, 255, 0);
border-radius: 50% 50% 40% 40% / 40% 50% 50% 40%;
left: 8.4px;
bottom: 8.5px;
width: 406px;
height: 412px;
}
.circle .circle1{
position: absolute;
background-color: rgb(255, 255, 0);
border-radius: 50% 50% 40% 40% / 40% 50% 50% 40%;
left: 8.4px;
bottom: 8.5px;
width: 406px;
height: 412px;
}
.circle .blad1{
position: absolute;
width: 120px;
height: 80px;
bottom: 36px;
left: -105px;
background-image: linear-gradient(to top right, rgb(255, 255, 0)16%, rgb(6, 5, 70)22%);
background-image: linear-gradient(to bottom right ,rgb(255, 255, 0)16%, rgb(6, 5, 70)22%);
filter:contrast(120%);
transform:perspective(100px) rotateX(5deg) rotateZ(-236.6deg);
border-radius: 30% 105% 1% 125% / 30% 125% 20% 105%;
z-index: -1;
}
.circle .blad2{
position: absolute;
width: calc(50% - 120px);
height: 80px;
bottom: -16px;
left: -33px;
background-image: linear-gradient(to top right, rgb(255, 255, 0)62% , rgb(6, 5, 70)35%);
background-image: linear-gradient(to bottom right ,rgb(255, 255, 0)62%, rgb(6, 5, 70)35%);
filter:contrast(120%);
transform:perspective(100px) rotateX(5deg) rotateZ(-241deg);
border-radius: 30% 105% 1% 125% / 30% 125% 20% 105%;
z-index: -1;
}
.circle .blad3{
position: absolute;
width: calc(50% - 120px);
height: 80px;
bottom: -66px;
left: 35px;
background-image: linear-gradient(to left,rgb(255, 255, 0)52%, rgb(6, 5, 70)52% );
background-image: linear-gradient(to bottom,rgb(255, 255, 0)52%, rgb(6, 5, 70)52%);
filter:contrast(120%);
transform:perspective(100px) rotateX(5deg) rotateZ(-264deg);
border-radius: 30% 105% 1% 125% / 30% 125% 20% 105%;
z-index: -1;
}
<div class="drawing">
<div class="circle">
<div class="kern"></div>
<div class="circle1">
<div class="blad1"></div>
<div class="blad2"></div>
<div class="blad3"></div>
</div>
</div>
</div>
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 want background shape to include triangle shape and I did it with css. I want that to be responsive in every screen size. I am stuck in this . Any advice ...
header {
width: 100%;
height:150px;
background: #eee;
}
main {
width: 100%;
height:150px;
background: #000;
position:relative;
z-index: 1;
}
main::before {
background: inherit;
top: 0;
content: '';
display: block;
height: 90%;
left: 0;
position: absolute;
right: 0;
transform: skewY(-3deg);
transform-origin: 0;
z-index: -1;
}
main::after {
border-top: 16vh solid blue;
border-left: 50vw solid transparent;
width: 0;
height: 0;
transform: skewY(-3deg);
position: absolute;
content: "";
transform-origin: 0;
right: 0;
top: -10%;
}
<header></header>
<main>
<main>
Expected result in every screen size
You can use clip-path - polygon properties for this.
The issue is, this doesn't support on IE 🤷♂️
More information
Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
W3Schools: https://www.w3schools.com/cssref/css3_pr_clip-path.asp
CSS Tricks: https://css-tricks.com/almanac/properties/c/clip-path/
main {
position: relative;
width: 100%;
height: 150px;
background: #000;
z-index: 1;
overflow: hidden;
}
main::before,
main::after {
content: '';
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
main::before {
background-color: #00f;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 0%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 0%);
}
main::after {
background-color: #fff;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
}
<main><main>
You can try like below:
html::before {
content: "";
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60vh;
transform-origin: right;
transform: skewY(-5deg);
background: linear-gradient(-160deg, blue 15vw, #000 15.2vw);
}
I really dont want to answer my own question though, I have been research for about two days and I found something really effective solution. So let me post it .
If I have modify a little bit on main::after property , it can be show responsively now.
transform-origin: 0; to transform-origin: -99%;
top: -10% to top: 0
That is...
I have a simple 100vw-100vh page with 3 images in the background for mobile, and 5 in a different set-up for larger viewports.
The way I have it set-up so far:
3 (or 5) div containers, clipped as a polygon in CSS
the images set as background-image of each container in CSS, with background-size: cover.
This works fine to display the images, but when I try to add borders to the containers the clipped sides won't get the border, only the "original" bits would (as in, of the sides of the rectangles before clipping).
Is there a way to add them all around?
Note: I have played with background-origin without result. The whole page is set-up with box-sizing: border-box; but it does not seem to impact the result either.
Codepen of my code, for the mobile version (3 images) below.
Many thanks for your help!
PS: I have seen a couple of posts related to the topic to an extent, but not with the background image set-up the same way, and as they were all a bit old I thought wider browser support may help #hope. Sorry for any redundancy I would have missed!
https://codepen.io/aguafresca/pen/abNvyXO?editors=1100
<body> <main>
<welcome-page>
<contacto-link>
<p>contact details</p>
</contacto-link>
</welcome-page>
<background-container id="cont1" class=""></background-container>
<background-container id="cont2" class=""></background-container>
<background-container id="cont3"></background-container>
</main> </body>
CSS:
/* general set-up */
html {
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
*, *:before, *:after, a, main, body {
box-sizing: inherit;
margin: 0;
padding: 0;
}
/* setting-up the background */
welcome-page {
z-index: 2;
height: 100vh;
width: 100vw;
position: absolute;
top:0;
left:0;
background-color: rgba(255, 255, 255, 0.3);
}
background-container {
display: block;
z-index: 1;
position: absolute;
background-color: dimgray;
background-size: cover;
border: red solid 3px;
background-origin: content-box;
}
#cont1 {
top: 0;
left: 0;
height: 60vh;
width: 70vw;
clip-path: polygon(0 0, 100% 0, 0 100%);
background-image: url("https://images.unsplash.com/photo-1596072181334-1adc75da7717?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
}
#cont2 {
top: 0;
left: 0;
height: 100vh;
width: 100vw;
clip-path: polygon(70% 0, 100% 0, 100% 40%, 30% 100%, 0 100%, 0 60%);
background-image: url("https://images.unsplash.com/photo-1595680337986-ce4862b497b9?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
}
#cont3 {
bottom: 0;
right: 0;
height: 60vh;
width: 70vw;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
background-image: url("https://images.unsplash.com/photo-1595035848637-29bd22af4faf?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
border-color: green;
z-index:10;
}
/* footer format */
contacto-link {
display: block;
position: fixed;
bottom: 0;
height: 5vh;
width:100vw;
line-height: 5vh;
background-color: rgba(255, 255, 255, 0.8);
color: dimgrey;
}
Using an extra wrapper you can consider drop-shadow to simulate the borders.
Here is an example where I will not really and an extra wrapper but I will use pseudo element for the image:
body {
margin: 3px;
height: calc(100vh - 6px);
position: relative;
}
.background-container {
z-index: 1;
position: absolute;
filter:
drop-shadow(0px 3px 0px red)
drop-shadow(3px 0px 0px red)
drop-shadow(0px -3px 0px red)
drop-shadow(-3px 0px 0px red)
}
.background-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
}
#cont1 {
top: 0;
left: 0;
height: 60%;
width: 70%;
}
#cont1::before {
clip-path: polygon(0 0, 100% 0, 0 100%);
background-image: url("https://picsum.photos/id/10/800/800");
}
#cont2 {
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index:2;
}
#cont2::before {
clip-path: polygon(70% 0, 100% 0, 100% 40%, 30% 100%, 0 100%, 0 60%);
background-image: url("https://picsum.photos/id/1011/800/800");
}
#cont3 {
bottom: 0;
right: 0;
height: 60%;
width: 70%;
}
#cont3::before {
clip-path: polygon(100% 0, 100% 100%, 0 100%);
background-image: url("https://picsum.photos/id/1074/800/800");
}
<div class="background-container" id="cont1"></div>
<div class="background-container" id="cont2"></div>
<div class="background-container" id="cont3"></div>
And with different coloration:
body {
margin: 3px;
height: calc(100vh - 6px);
position: relative;
}
.background-container {
z-index: 1;
position: absolute;
filter:
drop-shadow(0px 3px 0px var(--c,red))
drop-shadow(3px 0px 0px var(--c,red))
drop-shadow(0px -3px 0px var(--c,red))
drop-shadow(-3px 0px 0px var(--c,red))
}
.background-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
}
#cont1 {
top: 0;
left: 0;
height: 60%;
width: 70%;
--c:blue;
}
#cont1::before {
clip-path: polygon(0 0, 100% 0, 0 100%);
background-image: url("https://picsum.photos/id/10/800/800");
}
#cont2 {
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index:2;
}
#cont2::before {
clip-path: polygon(70% 0, 100% 0, 100% 40%, 30% 100%, 0 100%, 0 60%);
background-image: url("https://picsum.photos/id/1011/800/800");
}
#cont3 {
bottom: 0;
right: 0;
height: 60%;
width: 70%;
--c:yellow;
}
#cont3::before {
clip-path: polygon(100% 0, 100% 100%, 0 100%);
background-image: url("https://picsum.photos/id/1074/800/800");
}
<div class="background-container" id="cont1"></div>
<div class="background-container" id="cont2"></div>
<div class="background-container" id="cont3"></div>
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>