Any idea how to implement this decreasing thickness underline using css:
(Example image)
I've tried to use border bottom, but couldn't give the decreasing thickness effect
You can use clip-path property. For more link
p {
position: relative;
font-size: 30px;
width: fit-content;
}
p span {
position: relative;
z-index: 2;
}
p:after {
background: orange;
clip-path: polygon(0 80%, 0% 100%, 100% 100%);
position: absolute;
width: 80%;
content: '';
height: 100%;
left: 0;
bottom: 0;
}
<p>
<span>Training & Development</span>
</p>
It's not just underline or border;
You should use :before in CSS and position: absolute; on it and position: relative; on the parent.
The code would be:
.underline {
position: relative;
font-size: 32px;
}
.underline:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 5px solid orange;
border-right: 300px solid transparent;
z-index: -1;
}
<span class="underline">Training & Development</span>
border-bottom: 5px <- here you can set the starting height of the underline.
border-right: 100px <- here you can set the width of the underline.
Read more about creating shapes in CSS here: https://css-tricks.com/the-shapes-of-css/
Related
I'm basically trying to make a element looking "disabled" by adding an after element with a white opaque filter exactly on top of it.
Problem is, just by setting width and height to 100% it does not include the parent's border!
How can I solve this? I need the after element to sit exactly on top of its parent
div {
border: 5px solid blue;
position: relative;
padding: 1rem;
background-color: blue;
text-align: center;
font-size: 120%;
font-family: sans-serif
}
div::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: white;
opacity: 0.6;
z-index: 2;
}
<div>Test</div>
Adjust the size and position by the amount of the borders using calc.
CSS Custom Properties would be ideal here.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
:root {
--bdr: 5px;
}
div {
border-style: solid;
border-color: blue;
border-width: var(--bdr);
position: relative;
padding: 1rem;
background-color: grey;
text-align: center;
font-size: 120%;
font-family: sans-serif;
width: 80%;
margin: 1em auto;
}
div::after {
content: "";
position: absolute;
width: calc(100% + ( 2 * var(--bdr)));
height: calc(100% + ( 2 * var(--bdr)));
top: calc(var(--bdr) * -1);
left: calc(var(--bdr) * -1);
background-color: red;
opacity: 0.6;
z-index: 2;
}
<div>
Test
</div>
You could set a negative margin equal to the border and use CSS calc function in the after element, like this:
div::after {
content: "";
position: absolute;
width: calc(100% + 10px);
height: calc(100% + 10px);
top: -5px;
left: -5px;
background-color: white;
opacity: 0.6;
z-index: 2;
}
here I'm using pseudo class element overlapping each other here before div border white color I want to give color with opacity like arrow color. I tried using color to ::before instead of white color but with opacity, it's not working. Can anyone suggest how white color change same as arrow color i want to cut the image and show an arrow in the background.
.box {
position: relative;
width: 200px;
height: auto;
padding: 100px;
}
.box:before {
content: '';
position: absolute;
bottom: 102px;
right: -86px;
border-top: 80px solid transparent;
border-right: 80px solid #fff;
width: 0;
z-index: 1;
}
.box::after {
border-style: solid;
border-width: 5em 5em 0 0;
content: '';
display: block;
top: 91px;
height: 8em;
left: 185px;
transform: rotate(-135deg);
width: 8em;
position: absolute;
z-index: -1;
color: rgba(255, 0, 0, 0.3);
}
<div class="box">
<img src="https://thumb.ibb.co/gdi10F/slide11.jpg" class="iva-img" alt="slide11" border="0">
</div>
<span class="chevron left"></span>
Want to achieve like this
You can use clip-path to cut the image and simplify the code of the arrow like below:
.box {
position: relative;
margin: 4em;
z-index:0;
display:inline-block;
}
img {
display:block;
margin:1em;
clip-path:polygon(0 0,100% 0, 100% calc(100% - 5em), calc(100% - 5em) 100%,0 100%);
}
.box::after {
border-style: solid;
border-width: 5em 0 0 5em;
content: '';
top: 0;
height: 100%;
left: 0;
width: 100%;
position: absolute;
z-index: -1;
color: rgba(255, 0, 0, 0.3);
transform: translateX(6em) rotate(-45deg);
box-sizing:border-box;
}
<div class="box">
<img src="https://thumb.ibb.co/gdi10F/slide11.jpg" class="iva-img" alt="slide11" border="0">
</div>
I actually googled and searched some info but couldn't find it.
My aim is to achieve something similar to progress bar styling such as filling inside of triangle. Is there any ways?
JSFiddle
.angle {
width: 0;
height: 0;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 75px solid black;
}
In order to make the triangle, I would use two pseudo elements to 'cut it out' of the square div. Then, with a nested div, use absolute positioning to allow you to 'fill' it to a certain value (by setting the .amount div's height in %).
.amount {
position: absolute;
height: 0%;
width: 100%;
bottom: 0;
left: 0;
transition: all 1s;
background: tomato;
}
.tri {
position: relative;
height: 200px;
width: 200px;
background: lightgray;
}
.tri:before,
.tri:after {
content: "";
position: absolute;
border-top: 200px solid white;
top: 0;
z-index: 8;
}
.tri:before {
border-left: 100px solid transparent;
left: 50%;
}
.tri:after {
border-right: 100px solid transparent;
left: 0;
}
.tri:hover .amount {
height: 100%;
}
<div class="tri">
<div class="amount"></div>
</div>
May something like this?
.angle {
position: relative;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid blue;
}
.angle:after {
position: absolute;
content: "";
top: 0;
left: 50%;
margin-left: -50px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid black;
}
fiddle: http://jsfiddle.net/bkaxzLnu/3/
Here is another CSS ONLY, NO-BORDERS, NO AFTER/BEFORE HACKS option:
You could use clip-path. It allows you to show only part of an element and hide the rest.
So you could do something like this:
.amount {
position: absolute;
height: 100%;
width: 0%;
bottom: 0;
left: 0;
transition: all 1s;
background: tomato;
}
.tri {
position: relative;
width: 500px;
height: 50px;
background: #ddd;
/* triangle */
clip-path: polygon( 100% 0%,100% 100%, 0% 100%);
}
.tri:hover .amount {
width: 100%;
background: chartreuse ;
}
<div class="tri">
<div class="amount"></div>
</div>
I need to create a CSS shape like this image..
Please check this fiddle of my work
I have created something like that, but I cannot give a curve to it.
#shape {
border-left: 70px solid transparent;
border-top: 100px solid red;
height: 0;
width: 200px;
}
Can anyone help me?
You can use a pseudo element with border-radius and background-shadows to create the curve and enable a transparent background for the curve.
Output :
#shape {
width: 300px; height: 100px;
position: relative;
overflow: hidden;
}
#shape:before {
content: '';
position: absolute;
top: 10%; right: 0;
width: 300%;
padding-bottom: 300%;
border-radius: 100%;
background: none;
box-shadow: 10px -10px 5px 300px #F15723;
z-index: -1;
}
body{background:url(https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg);background-size:cover;}
<div id="shape"></div>
demo
Variant #01:
CSS3 linear-gradient() can draw this background as well:
CSS:
div {
background: linear-gradient(45deg, transparent 50px, tomato 50px);
}
Output Image:
body {
background: linear-gradient(lightgreen, green);
min-height: 100vh;
margin: 0;
}
div {
background: linear-gradient(45deg, transparent 50px, tomato 50px);
height: 150px;
margin: 20px;
width: 400px;
}
<div>
</div>
Variant #02:
We can use :before and :after pseudo elements and use css3 transformation to make this shape with round corners.
body {
background: linear-gradient(lightgreen, green);
min-height: 100vh;
margin: 0;
}
div {
border-radius: 10px;
position: relative;
overflow: hidden;
height: 150px;
margin: 20px;
width: 400px;
}
div:before {
border-radius: 0 0 10px 10px;
transform-origin: 100% 0;
transform: skewY(45deg);
background: tomato;
position: absolute;
width: 45px;
z-index: -1;
content: '';
bottom: -5px;
left: 0;
top: 0;
}
div:after {
border-radius: 0 10px 10px 10px;
background: tomato;
position: absolute;
content: '';
left: 35px;
bottom: 0;
right: 0;
top: 0;
}
<div>
</div>
Right, I ran into a bit of a problem and not to sure if this can be solved another way.
I need to move the content: "F"; and center it onto the border I have in the top left corner. Now is this possible without creating another element?
HTML:
<div class="userBoxF"></div>
CSS:
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:after {
content: "F";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
font-size: 30px;
}
The only way I can think to do it is to create the corner as a completely separate element so I can put the text "F" into a span (or something) and move it that way.
Demo Here
Note: Nothing here will change size, width and height for both the box and corner will always be the same.
Here is what I want, using the solution i found but would rather not use.
HTML:
<div class="userBoxF">
<div class="corner"><span>F</span></div>
</div>
CSS:
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF .corner {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
font-size: 30px;
}
.userBoxF .corner span {
display: block;
position: absolute;
top: -30px;
left: -20px;
}
Here is a demo of the solution I came up with but I would rather not create anymore elements.
My Solution
You can use :before wit :after together.
I removed the span:
<div class="userBoxF">
</div>
And changed the CSS blocks to this:
.userBoxF:before {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
content: "";
}
.userBoxF:after {
display: block;
position: absolute;
top: 10px;
left: 14px;
content: "F";
font-size: 30px;
}
And here's the updated fiddle
EDIT: Here's an added bonus!
You can jack the "F" from the class, if you want it to be more versatile, if you use CSS's attr inside content. Example:
<div class="userBox" data-l="F">
</div>
And:
.userBox:after {
display: block;
position: absolute;
top: 10px;
left: 14px;
content: "" attr(data-l);
font-size: 30px;
}
And another fiddle
Arguably the "F" is actual content as it's not a styling option...it actually denotes something and, perhaps should be read by a screenreader (for instance) then a span with a gradient (TL - BR) mightbe more appropriate.
JSFiddle Demo
HTML
<div class="userBoxF">
<span class="section-letter">F</span>
</div>
CSS
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.section-letter {
position: absolute;
top: 0;
left: 0;
width:2em;
height:2em;
line-height: 1em;
text-align: left;
padding:0.25em 0 0 0.25em;
font-size: 30px;
background: linear-gradient(135deg, pink 0%, pink 50%, transparent 50%, transparent 100%);
}
Simply use another :psuedo:
Demo Fiddle
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:before,.userBoxF:after{
position: absolute;
top: 0;
left: 0;
}
.userBoxF:before {
content:"";
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
}
.userBoxF:after {
content:attr(data-l);
top: 10px;
left: 10px;
font-size: 30px;
}
From a single pseudo, you can use a gradient as background : DEMO
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:after {
content:"F";
position: absolute;
top: 0;
left: 0;
text-indent:20px;
line-height:60px;
width:80px;
height:80px;
background:linear-gradient(to bottom right, #F385FF 51%, transparent 49%);
font-size: 30px;
}
background-image as gradient can be just an image like in old days :
DEMO: