I have been trying to make a custom shape with a border and transparent background.
The initial approach, i tried was with transfrom skew but that couldn't give me the shape i was after.
I have also been experimenting with clip paths, my first attempt i managed to control the angle based off the height and also the right padding, which is a benefit. I would prefer to use this for that reason but unfortunately putting border on it doesn't work.
I found a bit online about having a shape inside a shape but then i cant have a clear background but its the shape i'm after.
If any one knows how i can create this shape either amending the code i tried using or a different approach i haven't thought about that would be great.
For visual reference this is what i'm trying to achieve.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
:root {
--cta-height: 60px;
--cta-angle: calc(var(--cta-height) - 20px);
--cta-side-padding: 40px;
--cta-height-inner: calc(var(--cta-height) - 4px);
--cta-angle-inner: calc(var(--cta-height-inner) - 20px);
}
.img1 {
background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
}
.bk-image {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 50px;
}
/* attemp one with angle and right padding based off of the height */
.cta {
clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
-webkit-clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
display: flex;
align-items: center;
height: var(--cta-height);
padding-right: calc(var(--cta-angle) + var(--cta-side-padding));
padding-left: var(--cta-side-padding);
margin-bottom: 50px;
}
.cta__ora {
border: 2px solid orange;
color: #ffffff;
}
.flex-p {
display: flex;
align-content: center;
}
/* attemp two */
.outside {
position: relative;
background: tomato;
clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
-webkit-clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
height: var(--cta-height);
padding-right: calc(var(--cta-angle) + var(--cta-side-padding));
padding-left: var(--cta-side-padding)
}
.inside {
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
background: white;
clip-path: polygon(0% 0%, calc(100% - 4px) 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
-webkit-clip-path: polygon(0% 0%, calc(100% - 4px) 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
}
</style>
</head>
<body>
<div class="bk-image img1 ">
<div class="flex-p">
<a class="cta cta__ora">clip path angle adjust from the height</a>
</div>
<div class="outside">
<div class="inside">
hello
</div>
</div>
</div>
</body>
</html>
You can work a little bit with ::after and position like a slash
body {
background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg") no-repeat;
}
.inside {
height: 50px;
width: 300px;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
position: relative;
clip-path: polygon(0 0, 100% 0%, 89% 100%, 0% 100%);
}
.inside::after {
content: "";
position: absolute;
height: 65px;
width: 300px;
top: -2px;
right: -1.5px;
border-right: 2px solid black;
transform: rotate(31.8deg);
transform-origin: right top;
}
<div class="inside">
Find out more
</div>
Related
I am working on angular application in which I am making a progress bar. My code is as follows:
CSS:
.progressbar {
height: 56px;
background: lightgray;
box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5);
animation: change 1s linear infinite;
margin: 5px -10px;
clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%);
}
.progressbar:first-child {
margin-left: 0;
clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
}
.progressbar:last-child {
margin-right:0;
}
.bar {
display:flex;
gap:20px; /*You can use now this property to play with the separation between the bars*/
}
.progressbar.active{
background:
linear-gradient(to right, red 0%, yellow 50%, green 34%)
left/var(--p, 100%) fixed,
lightgray;
box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5);
}
HTML:
<div class="bar">
<div class="progressbar active" style="width:100%;"></div>
<div class="progressbar" style="width:100%;"></div>
<div class="progressbar" style="width:100%;"></div>
</div>
With this I am getting a progress bar like this . This is very near to my desired result. But with this code arrow shape of bars is not proper. The shape of arrow I want is . How can I change shape of my bars exactly as same that of required as shown in image.
Add negative right margin to your tabs (+ the desired gap size)
Add a positive margin-right to the parent wrapper (of the same size)
Easily achievable with just two CSS variables --d and --gap. Edit their values to achieve the desired result:
/*Quick Reset*/
* { margin: 0; box-sizing: border-box; }
body {
font: 1rem/1.3 sans-serif;
}
/*
* Progressbar
*/
.bar {
--d: 1rem; /* arrow depth */
--gap: 0.3rem; /* arrow thickness, gap */
display: flex;
margin-right: var(--d);
}
.bar-step {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 0.6rem var(--d);
margin-right: calc(var(--d) * -1 + var(--gap));
background: #d9e3f7;
color: #23468c;
clip-path: polygon(
0% 0%,
calc(100% - var(--d)) 0%,
100% 50%,
calc(100% - var(--d)) 100%,
0% 100%,
var(--d) 50%
);
}
.bar-step:first-child {
clip-path: polygon(
0% 0%,
calc(100% - var(--d)) 0%,
100% 50%,
calc(100% - var(--d)) 100%,
0% 100%
);
}
.bar-step.active {
background: #23468c;
color: #fff;
}
<div class="bar">
<div class="bar-step active">Step 1</div>
<div class="bar-step">Step 2 text</div>
<div class="bar-step">Step 3</div>
<div class="bar-step">Step 4</div>
</div>
I was wondering if it was possible to split a screen into 2 parts diagonally as shown on the picture. Once I'd hover over Picture A, the diagonal line would shift a bit to the right, revealing more of picture A while hiding a bit of picture B (I'm thinking transition?), and when I'd hover over picture B the opposite would happen.
Thanks in advance,
Martin
The diagonal image transition effect is unique request. I tried my best, Can you please check revealing effect.
section {
border: 1px solid black;
display: flex;
width: 400px;
box-sizing: border-box;
}
.diagonalHover {
position: absolute;
width: 66%;
height: 200px;
transition: all 0.3s ease-out;
}
.diagonalHover.first,
.diagonalHover.second {
background-image: url(https://cdn.pixabay.com/photo/2016/07/20/22/33/vajdahunyadvar-1531470_960_720.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.diagonalHover.second {
background-image: url(https://cdn.pixabay.com/photo/2020/02/05/22/17/vendetta-4822543__340.jpg);
}
.diagonalHover.first:hover {
width: 75%;
z-index: 1;
}
.diagonalHover.second:hover {
width: 75%;
z-index: 1;
}
.diagonalHover.first:hover + .second {
}
.diagonalHover.first {
left: 0;
top: 0;
-webkit-clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
}
.diagonalHover.second {
right: 0;
top: 0;
-webkit-clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
}
<section>
<div class="diagonalHover first">
</div>
<div class="diagonalHover second">
</div>
</section>
Good morning,
I want to have the same background as in header, where is line gradient.
html, body { margin: 0; background: #d8dfe9;}
header{position: relative; height: 90px; width: 100%; background: linear-gradient(to right, #045FB4 0%,#00BFFF 100%);}
header:after {content: ''; position: absolute; left: calc(50% - 4.8px); top: 90px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid blue; clear: both; z-index: 1;}
main {position: relative; overflow: auto; ; height: 100vh;}
main #timeline {position: relative; width: 100%; height: 70px; background: white}
<header>
</header>
<main>
<div id="timeline">
</div>
</main>
Please, can you help me?
The easiest solution is to use clip-path
html,
body {
margin: 0;
background: #d8dfe9;
}
header {
position: relative;
height: 90px;
width: 100%;
background: linear-gradient(to right, #045FB4 0%, #00BFFF 100%);
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 10px), calc(50% + 10px) calc(100% - 10px), 50% 100%, calc(50% - 10px) calc(100% - 10px), 0% calc(100% - 10px));
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 10px), calc(50% + 10px) calc(100% - 10px), 50% 100%, calc(50% - 10px) calc(100% - 10px), 0% calc(100% - 10px));
}
<header>
</header>
Or you can use more gradient if you want better support than clip-path but without transparency:
html,
body {
margin: 0;
background: #d8dfe9;
}
header {
position: relative;
height: 90px;
width: 100%;
background: linear-gradient(to right, #045FB4 0%, #00BFFF 100%) fixed;
position:relative;
}
header:before {
content:"";
position:absolute;
width:20px;
height:10px;
top:100%;
right:calc(50% - 10px);
background:
linear-gradient(to bottom left,transparent 49%,#d8dfe9 50.5%) left/50% 100% no-repeat,
linear-gradient(to bottom right,transparent 49%,#d8dfe9 50.5%) right/50% 100% no-repeat,
linear-gradient(to right, #045FB4 0%, #00BFFF 100%) fixed;
}
<header>
</header>
I am creating trapezoid using following CSS:
.trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
background: linear-gradient(red, yellow);
}
<div class='trapezoid'></div>
The linear-gradient attribute is not working. I want the trapezoid as shadow i.e its color should eventually fade away. Can anyone please help me on this?
Or use a transform on a suitably sized element (or pseudo-element).
.trapezoid {
width: 100px;
height: 100px;
margin: auto;
transform: perspective(100px) rotateX(40deg);
background: linear-gradient(red, yellow);
}
<div class='trapezoid'></div>
You cannot apply gradient in this way as you are using border and your element has a height of 0 so background won't be visible.
Instead you can try to use multiple gradient to create the shape:
.trapezoid {
height: 100px;
width: 200px;
background:
linear-gradient(to bottom left,white 50%,transparent 52%) 100% 0/40px 100% no-repeat,
linear-gradient(to bottom right,white 50%,transparent 52%) 0 0/40px 100% no-repeat,
linear-gradient(red, yellow);
}
<div class='trapezoid'></div>
Or use clip-path:
.trapezoid {
height: 100px;
width: 200px;
background: linear-gradient(red, yellow);
-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
<div class='trapezoid'></div>
Another method with skew and pseudo-element:
.trapezoid {
height: 100px;
width: 200px;
position: relative;
}
.trapezoid:before,
.trapezoid:after{
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 60%;
background: linear-gradient(red, yellow);
transform:skew(20deg);
transform-origin:bottom right;
}
.trapezoid:after {
left: 0;
transform:skew(-20deg);
transform-origin:bottom left;
}
<div class='trapezoid'></div>
I have an image as shown below:
Here is my HTML:
<div class="diamond-border" style="left:10px;top:10px"></div>
<div class="diamond" style="left:13px;top:13px" >
<img src="http://res.cloudinary.com/demo/image/upload/sample.jpg" />
</div>
Here is my css:
.diamond
{
background-color: white;
height: 260px;
width: 260px;
position: absolute;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.diamond-border
{
background-color: #AAA;
height: 266px;
width: 266px;
position: absolute;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.diamond img
{
height: 300px;
width: 300px;
}
What I want:
I want to show the border around image as follows:
What I tried for that:
img
{
border: 5px solid red;
}
But the border is not showing. How do I show that border?
JSFiddle
https://jsfiddle.net/Vishal1419/gfok1bv8/
you can create a div with same height and width as your image to wrap that code and give it a border.
here is updated code from your fiddle
<div class="diamond-container">
<div class="diamond-border" style="left:10px;top:10px"></div>
<div class="diamond" style="left:13px;top:13px" >
<img src="https://res.cloudinary.com/demo/image/upload/sample.jpg" />
</div>
</div>
and css:
.diamond
{
background-color: white;
height: 260px;
width: 260px;
position: absolute;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.diamond-border
{
background-color: #AAA;
height: 266px;
width: 266px;
position: absolute;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.diamond img
{
height: 300px;
width: 300px;
}
.diamond-container{
border: 5px solid red;
height: 300px;
width: 300px;
}
here is an updated fiddle
https://jsfiddle.net/icernn03/gfok1bv8/3/
You can use css transform property to achieve that. check this fiddle:
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
https://jsfiddle.net/ggukk60j/
You can use a wrapper :
#wrapper {
border:5px solid red;
height: 300px;
width: 300px;
}
.diamond
{
background-color: white;
height: 260px;
width: 260px;
position: absolute;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.diamond-border
{
background-color: #AAA;
height: 266px;
width: 266px;
position: absolute;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.diamond img
{
height: 300px;
width: 300px;
}
<div id="wrapper">
<div class="diamond-border" style="left:10px;top:10px"></div>
<div class="diamond" style="left:13px;top:13px" >
<img src="http://res.cloudinary.com/demo/image/upload/sample.jpg" />
</div>
</div>