Goal: All corners of the rectangle should be round.
Problem: The lower right corner is angular because I have slightly sharpened the edge with CSS Clip path.
Questions: 1. what do I have to do to round the lower right corner?
2. is Clip Path possibly the wrong way to implement what I want?
section {
background: gray;
height:100vh;
padding:10px;
}
.block {
background: green;
padding: 10px 10px 50px 10px;
clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
border-radius: 10px;
}
<section>
<div class="block">
<div>lorem ipsum</div>
<div>lorem ipsum</div>
<div>lorem ipsum</div>
<div>lorem ipsum</div>
</div>
</section>
a skew transform combined with pseudo element can do it:
section {
background: gray;
height: 100vh;
padding: 10px;
}
.block {
padding: 10px 10px 50px 10px;
border-radius: 10px;
position: relative;
z-index: 0;
overflow: hidden;
}
.block:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: green;
border-radius: inherit;
transform-origin: left;
transform: skewY(-2deg);
}
<section>
<div class="block">
<div>lorem ipsum</div>
<div>lorem ipsum</div>
<div>lorem ipsum</div>
<div>lorem ipsum</div>
</div>
</section>
Related
I want to achieve this kind of Layout using Css Transform or gradient Background?(see image below). Right now im stuck with it using conic-gradient, i dont know how to put a gradient background on it.
see snippet below. run the code snippet as fullpage.
Thanks Guys.
//gol-bg
.my-bg-image {
background: url("https://via.placeholder.com/728x90.png?text=Background-image+Backgground-image+Background-image") 0 0 / cover no-repeat;
}
.gol-bg {
display: block;
height: 200px;
width: 700px;
position: relative;
background: conic-gradient(
transparent 136deg, transparent 0 140deg, yellow 140deg);
.my-content {
position: relative;
z-index: 1;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-dark my-bg-image">
<div class="row no-gutters">
<div class="col-6">
<div class="gol-bg">
<div class="my-content">content</div>
</div>
</div>
</div>
</div>
I'm not sure if i understood your question correctly but
Yes, you can use multiple transforms
(Also, take a look at this:
https://bennettfeely.com/clippy/)
Here's an example:
div {
height: 100px;
width: 100px;
background: #000;
color: #fff;
margin: 5em auto; /* Just to center it a bit */
/* Transform part */
transform: scale(2) rotate(90deg);
}
<div>Hello World</div>
this may not be the answer you are looking for but you can do this too. CSS is capable of making all sorts of shapes.
.my-bg-image {
background: url("https://via.placeholder.com/728x90.png?text=Background-image+Backgground-image+Background-image") 0 0 / cover no-repeat;
}
.gol-bg {
display: block;
position: relative;
width: 250px;
height: 0px;
border-left: 50px solid red;
border-right: 50px solid red;
border-bottom: 100px solid red;
border-top: 100px solid red;
position: relative;
}
.gol-bg:after {
content: '';
position: absolute;
background: transparent linear-gradient(91deg, #02b3bc 0, #171c8f 100%) 0 0 no-repeat padding-box;
width: 0;
height: 0;
border-left: 250px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid red;
position: absolute;
content: "";
top: 0px;
left: -50px;
}
.gol-bg .my-content {
position: relative;
z-index: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-dark my-bg-image">
<div class="row no-gutters">
<div class="col-6">
<div class="gol-bg">
<div class="my-content">content</div>
</div>
</div>
</div>
</div>
Is it possible to create css ribbon in corner shaped?
.
I've tried with an png image, but is there any option to create using css ? should work with responsive views also.
.container {
width: 200px;
height: 200px;
position: relative;
margin: 20px;
overflow: hidden;
}
.box {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.8; /* for demo purpose */
}
.stack-top {
height: 30px;
z-index: 9;
margin: 40px; /* for demo purpose */
transform: rotateY(0deg) rotate(45deg); /* needs Y at 0 deg to behave properly*/
transition: transform 2s;
color: #fff;
}
<div class="container">
<div class="box" style="background: #fffff3;"></div>
<div class="box stack-top" style="background: #242424;"> 1Month</div>
</div>
You can try like below:
.container {
width: 200px;
height: 150px;
position: relative;
display:inline-block;
margin: 10px;
background: lightblue;
}
.stack-top {
/* adjust the below to control the shape */
--d:5px;
--g:16px;
--c:#333;
/**/
position: absolute;
top: 0;
right: 0;
transform: translate(29.29%, -100%) rotate(45deg); /* 29.29% = 100%*(1 - cos(45deg)) */
color: #fff;
text-align: center;
width: 100px;
transform-origin: bottom left;
padding:5px 0 calc(var(--d) + 5px);
background:
linear-gradient(135deg, transparent var(--g), var(--c) calc(var(--g) - 0.3px)) left,
linear-gradient(-135deg,transparent var(--g), var(--c) calc(var(--g) - 0.3px)) right;
background-size:51% 100%;
background-repeat:no-repeat;
clip-path:polygon(0 0,100% 0,100% 100%, calc(100% - var(--d)) calc(100% - var(--d)), var(--d) calc(100% - var(--d)),0 100%)
}
<div class="container">
<div class="stack-top">1Month</div>
</div>
<div class="container">
<div class="stack-top" style="--d:0px;--g:19px;width:120px;--c:blue">1Month</div>
</div>
<div class="container">
<div class="stack-top" style="--d:8px;--g:17px;width:80px;--c:red">XX</div>
</div>
<div class="container">
<div class="stack-top" style="--d:10px;--g:20px;width:200px;--c:green">1Month</div>
</div>
Another adjustment to add a shadow effect to the folded part:
.container {
width: 200px;
height: 150px;
position: relative;
display:inline-block;
margin: 10px;
background: lightblue;
}
.stack-top {
/* adjust the below to control the shape */
--d:5px;
--w:100px;
--c:#333;
/**/
position: absolute;
top: 0;
right: 0;
transform: translate(29.29%, -100%) rotate(45deg); /* 29.29% = 100%*(1 - cos(45deg)) */
color: #fff;
text-align: center;
width: var(--w);
transform-origin: bottom left;
padding:5px 0 calc(var(--d) + 5px);
background:
linear-gradient(rgba(0,0,0,0.6) 0 0) bottom/100% var(--d) no-repeat
var(--c);
clip-path:polygon(0 100%,0 calc(100% - var(--d)),50% calc(100% - var(--d) - var(--w)/2),100% calc(100% - var(--d)),100% 100%,calc(100% - var(--d)) calc(100% - var(--d)), var(--d) calc(100% - var(--d)))
}
<div class="container">
<div class="stack-top">1Month</div>
</div>
<div class="container">
<div class="stack-top" style="--d:0px;--w:120px;--c:pink">1Month</div>
</div>
<div class="container">
<div class="stack-top" style="--d:8px;--w:80px;--c:red">XX</div>
</div>
<div class="container">
<div class="stack-top" style="--d:12px;--w:200px;--c:green">1Month</div>
</div>
You can add position option:
.container {
width: 200px;
height: 150px;
position: relative;
display:inline-block;
margin: 10px;
background: lightblue;
}
.stack-top {
/* adjust the below to control the shape */
--d:5px;
--w:100px;
--c:#333;
/**/
position: absolute;
top: 0;
right: 0;
transform: translate(29.29%, -100%) rotate(45deg); /* 29.29% = 100%*(1 - cos(45deg)) */
color: #fff;
text-align: center;
width: var(--w);
transform-origin: bottom left;
padding:5px 0 calc(var(--d) + 5px);
background:
linear-gradient(rgba(0,0,0,0.6) 0 0) bottom/100% var(--d) no-repeat
var(--c);
clip-path:polygon(0 100%,0 calc(100% - var(--d)),50% calc(100% - var(--d) - var(--w)/2),100% calc(100% - var(--d)),100% 100%,calc(100% - var(--d)) calc(100% - var(--d)), var(--d) calc(100% - var(--d)))
}
.stack-top.left {
left:0;
right:auto;
transform: translate(-29.29%, -100%) rotate(-45deg);
transform-origin: bottom right;
}
<div class="container">
<div class="stack-top">1Month</div>
</div>
<div class="container">
<div class="stack-top" style="--d:0px;--w:120px;--c:pink">1Month</div>
</div>
<div class="container">
<div class="stack-top left" style="--d:8px;--w:80px;--c:red">XX</div>
</div>
<div class="container">
<div class="stack-top left" style="--d:12px;--w:200px;--c:green">1Month</div>
</div>
In respond to Create a CSS tag over a score card in div (tagged as a duplicate) but can give here hints to anyone else too
You are trying to evaluate a rotation and a translation together to position your ribbon, absolute coordonate + rotate + transform-origin can make it much easier to manage.
You can also use transform-origin to decide where it should rotate around and oversize it (to overflow enough to make it also grow a few lines if needed) and set a padding where areas will can be cut off , overflow:hidden can used to hide both sides.
below your CSS revisited and an example wrapping a few lines .
body {
display: flex;
}
.project-card {
margin: 1em;
height: 350px;
width: 300px;
background-color: blue;
position: relative;
overflow: hidden;
}
.achievement-label {
position: absolute;
width: 300px;
padding: 0.3rem 90px;
box-sizing: border-box;
background-color: red;
transform: rotateZ(-45deg);
top: 0;
left: 0;
transform-origin: 150px 150px;
text-align: center;
}
<div class="project-card">
<div class="achievement-label">Winner <br> Is The Big <br>Best.</div>
</div>
<div class="project-card">
<div class="achievement-label">Winner</div>
</div>
For the clip-path, you are trying also to keep a 45deg angle, you may decide to draw that path over a square and cut it in half to get that 45deg angle. meanwhile let's take a look at shape-outside which has a similar syntax and lets content flow around a shape.
With some extra markup, you can use float shape-outside (same syntax than clip-path) in place off the padding area to cut off, to let the text follow the shape if it goes under a few lines.
To clip on a 45deg direction, you need to start from a square, offset coordonates of clip-path can be standing outside, here the oversize on each size of the ribbon is about 90px, so let's use a 90px square to draw that path within.
previous example revisited with extra tags below:
body {
display: flex;
}
.project-card {
margin: 1em;
height: 350px;
width: 300px;
background-color: blue;
position: relative;
}
.achievement-label {
display: grid;/* (or flex) will make height:100% meaning full for the direct children of the grid cells element (<p><i>)*/
position: absolute;
width: 300px;
padding: 0.3rem 0;
box-sizing: border-box;
background-color: red;
transform: rotateZ(-45deg);
top: 0;
left: 0;
transform-origin: 150px 150px;
text-align: justify;
text-align-last: justify;
color: white;
clip-path: polygon(90px 0, calc(100% - 90px) 0, 100% 90px, 0 90px);
}
p {
margin: 0;
}
div.achievement-label i {
float: left;
height: 100%;
width: 80px;
shape-outside: polygon(0 0, 90px 0%, 0 90px, 0% 90px);/* NOTE works as long as height is not taller than 90px */
background: tomato;
}
div.achievement-label i+i {
float: right;
shape-outside: polygon(0 0, 90px 0, 90px 90px, 90px 90px);
}
<div class="project-card">
<div class="achievement-label">
<p><i></i><i></i> Winner Is The Best <br>Is Really The Best <br> ... -/- ....</p>
</div>
</div>
<div class="project-card">
<div class="achievement-label">
<p><i></i><i></i> Winner Is The Best </p>
</div>
</div>
for a -45deg you can eventually use css var() and calc() to have to set only the width of your ribbon.
possible examples
body {
display: flex;
flex-wrap:wrap;
}
.project-card {
margin: 1em;
height: 350px;
width: 300px;
background-color: blue;
position: relative;
overflow: hidden;
}
.achievement-label {
text-align: center;
position: absolute;
box-sizing: content-box;
top: 0;
left: 0;
transform: rotate(-45deg);
/* init ribbon position for a -45deg rotation at top right corner */
--width: 150px;
--edgeOffset: calc( var(--width) / 2);
--topOffset: calc( (var(--width) *.9));
width: var(--width);
transform-origin: 0 var(--edgeOffset);
margin-top: var(--topOffset);
padding: 0.3rem var(--edgeOffset);
/* see padding areas */
background: linear-gradient(to right, red var(--edgeOffset), tomato var(--edgeOffset), tomato calc(100% - var(--edgeOffset)), red calc(100% - var(--edgeOffset)));
}
.bis {
width: 200px;
height: 200px;
}
.ter {
width: 350px;
height: 100px;
}
.last {
width:100%;
height:80vh;
min-width:200px;
min-height:200px;
}
<div class="project-card">
<div class="achievement-label">defaut set </div>
</div>
<div class="project-card bis">
<div class="achievement-label" style="--width:125px;">125px</div>
</div>
<div class="project-card ter">
<div class="achievement-label" style="--width:100px;">100px</div>
</div>
<div class="project-card last">
<div class="achievement-label" style="--width:250px;">250px</div>
</div>
Try using a Linear Gradient.
To create a linear gradient, you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
Syntax:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...)
Source: W3Schools.com
I'm Trying to customize a box shadow to shape like a triangle behind an image. Like this:
But i don't know if theres a way to doing it using box shadow.
This is my code so far.
#image{
width: 200px;
box-shadow: -10px 10px #ff9900;
}
<img src="https://placeimg.com/200/180/any" id="image" />
A simple border with gradient will do it and it will be responsive:
#image {
border: 10px solid transparent;
border-image: linear-gradient(to bottom left, transparent 60%, #ff9900 60.5%) 10;
}
<img src="https://placeimg.com/180/150/any" id="image" />
<img src="https://placeimg.com/250/150/any" id="image" />
Almost the same but with background:
.box{
width:200px;
height:150px;
padding:10px; /*control the space*/
background:
url(https://placeimg.com/180/150/any) center/cover content-box,
linear-gradient(to bottom left, transparent 60%, #ff9900 60.5%);
}
<div class="box"></div>
I think the box-shadow property cannot be modeled to be a format different than your father element.
For example, you cannot make a triangle shadow for a square image, like your question.
Try to make a triangle in css and make that with a realative position. Then, use your image with a absolute position.
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
position: relative;
margin-top: 30px;
}
#image {
position: absolute;
top: 20px;
left: 17px;
}
<div id="triangle-bottomleft"></div>
<img src="https://placeimg.com/100/100/any" title="title of image" alt="alt of image" id="image">
I hope this will helpu.
I would suggest nesting the triangle and refrain from using position: absolute; in this case:
#img {
position: relative;
width: 200px;
background: url(https://placeimg.com/200/150) no-repeat right top;
padding: 10px 10px 0 0;
}
#triangle {
position: relative;
border-bottom: 150px solid orange;
border-right: 200px solid transparent;
z-index: -1;
}
<div id="img">
<div id="triangle"></div>
</div>
If compatibility with IE is a non-issue you could also use clip-path:
#img {
position: relative;
width: 200px;
height: 150px;
background: url(https://placeimg.com/200/150) no-repeat right top;
padding: 10px 10px 0 0;
}
#triangle {
position: relative;
width: 100%;
height: 100%;
clip-path: polygon(0 0, 0% 100%, 100% 100%);
background-color: orange;
z-index: -1;
}
<div id="img">
<div id="triangle"></div>
</div>
I am trying to make some CSS code so that I can have vertical zigzag lines on the left and right of my BODY tag.
I want it to look like a ticket... something like this going from top to the bottom of the page on the left and right: https://roalddahl.fandom.com/wiki/Golden_Ticket?file=Golden_Ticket.png
I found this question with the requirement of the zigzags on the left, but it's not working correctly for me when I use on on the BODY: zigzag border in css left side
body {
background-color: #c5ac5a;
background: linear-gradient(-137deg, #c5ac5a 6px, transparent 0) 0 5px, linear-gradient(320deg, #c5ac5a 5px, #fff 0) 0 5px;
background-position: left;
background-repeat: repeat-y;
background-size:10px 10px;
}
<body>
<h1>The Title</h1>
</body>
EDIT: I want the whole background to be #c5ac5a and the vertical zigzags on both sides.
Use the :before and :after to achieve your goal. (I also changed the columns to use flex, but that's not necessary for the issue at hand). See provided snippet below:
body {
background: white;
}
.ticket {
background-color: #c5ac5a;
position: relative;
padding: 10px;
}
.ticket:before,
.ticket:after {
top: 0;
left: -10px;
content: '';
width: 10px;
height: 100%;
position: absolute;
background-color: #c5ac5a;
background: linear-gradient(-137deg, #c5ac5a 6px, transparent 0) 0 5px, linear-gradient(320deg, #c5ac5a 5px, transparent 0) 0 5px;
background-position: left;
background-repeat: repeat-y;
background-size:10px 10px;
}
.ticket:after {
left: auto;
right: -10px;
top: 0;
transform: scaleX(-1);
}
.hr {
border-bottom: 2px solid black;
}
h1 {
text-align: center;
font-family: Times, serif;
font-size:40px;
}
.column {
text-align:center;
flex: 1 1 auto;
padding: 10px 0;
}
.row {
display: flex;
}
.ticket__footer {
font-size: 12px;
text-align: center;
padding-top: 10px;
}
.bold {
font-weight:bold;
}
<div class="ticket">
<div class="hr">
</div>
<div class="title">
<h1>
GOLDEN TICKET
</h1>
</div>
<div class="hr">
</div>
<div class="row">
<div class="column">
<span class="small">DATE</span></br>
<span class="bold">FEB. 1</span>
</div>
<div class="column">
<span class="small">TIME</span></br>
<span class="bold">10 A.M (SHARP)</span>
</div>
<div class="column">
<span class="small">PLACE</span></br>
<span class="bold">RIGHT HERE</span>
</div>
</div>
<div class="hr">
</div>
<div class="ticket__footer">
THIS GOLDEN TICKET ENSURES ADMITTANCE
</div>
</div>
Here is the effect I am trying to achieve:
Example
I know how to make the triangle, my issue is that is is being created INSIDE of the box. If I set "left" to 100%, the box will disappear behind the right side of the box instead of going outside of the box over the next one.
Here is the Pen I am working on to try and get this to work:
My Code
HTML:
<div class="square title">
<div class="content">
<div class="table">
<div class="table-cell ">
<ul>This demo shows you can center multiple types of content :
<li>Text</li>
<li>Images</li>
<li>Lists</li>
<li>... (you can also do it with forms)</li>
</ul>
</div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell ">
<p>Hello World!</p>
</div>
</div>
</div>
</div>
CSS:
body {
font-family: sans-serif;
color: #fff;
font-size: 20px;
text-align: center;
}
.square {
float:left;
position: relative;
width: 33%;
padding-bottom : 33%; /* = width for a 1:1 aspect ratio */
/* margin:1.66%; */
background-color:#1E1E1E;
overflow:hidden;
/* border: solid 1px red; */
margin: 5px;
}
.content {
position:absolute;
height:90%; /* = 100% - 2*5% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 5%;
}
.table{
display:table;
width:100%;
height:100%;
}
.table-cell{
display:table-cell;
vertical-align:middle;
}
/* For list */
ul{
text-align:left;
margin:5% 0 0;
padding:0;
list-style-position:inside;
}
li{
margin: 0 0 0 5%;
padding:0;
}
.title::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid green;
left: 95%;
/* top: 45%; */
/* z-index: 999; */
}
I tried making a whole new div around the square and setting that to have the triangle, but it made the triangle go all the way to the right of the screen, even without setting anything for the left or right.
I also tried z-index but that didn't do anything either.
You can easily achieve this with only background:
.box {
display: inline-block;
width: 150px;
height: 150px;
background: grey;
}
.box:last-child {
background:
linear-gradient(to top right,grey 49.8%,transparent 50%) 0 calc(50% - 15px),
linear-gradient(to bottom right,grey 49.8%,transparent 50%) 0 calc(50% + 15px),
#000;
background-size:30px 30px;
background-repeat:no-repeat;
}
<div>
<div class="box">
</div>
<div class="box">
</div>
</div>