This question already has answers here:
Cut Corners using CSS
(16 answers)
Closed 2 years ago.
I'm struggling to replicate the button style as in the image below. I've tried using clip path but I'm not getting the desired effect where there is a visible border and a semitransparent background.
Is there a simple workaround for this?
https://i.stack.imgur.com/kI5eX.png
Your idea to use clip-path should work out. Here's an approach
a {
position: relative;
display: inline-block;
padding: 10px 20px;
background-color: rgba(255, 0, 0, .3);
box-shadow: inset 0 0 0 3px red;
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
a:before,
a:after {
content: '';
position: absolute;
width: 3px;
height: 30px;
background-color: red;
}
a:before {
left: 0;
top: 100%;
transform-origin: 50% 0%;
transform: translateY(-20px) rotate(-45deg);
}
a:after {
right: 0;
bottom: 100%;
transform-origin: 50% 100%;
transform: translateY(20px) rotate(-45deg);
}
Start my free session
The only issue with this solution is the support for clip-path https://caniuse.com/?search=clip-path
Here's a codepen https://codepen.io/Hornebom/pen/912d2557034ba9c3936a06ced8584de4
To achieve an exact copy of this image the background needs to be an svg image.
however if your background is solid you can do the trick with just css like this
button {
background-color: #bb000077;
border: 2px solid #ff6666;
font-weight: bold;
color: #fff;
font-size: 20px;
padding: 15px 25px;
position: relative;
outline: none;
}
button::before,
button::after {
content: '';
pointer-events: none;
position: absolute;
width: 29px;
height: 29px;
background-color: #fff;
transform: rotate(45deg);
}
button::after {
top: -16px;
right: -16px;
border-bottom: 2px solid #ff6666;
}
button::before {
bottom: -16px;
left: -16px;
border-top: 2px solid #ff6666;
}
<button>Start my free session</button
Below is my html and css code. It is pretty simple. I want to show a square \F1FC on a red react.
.parent::before {
position: absolute;
content: '';
width: 40px;
height: 40px;
background-color: red;
border-radius: 10px 0px 0px 10px;
transform: perspective(5px) rotateY(-2deg);
z-index: -1;
}
p::before {
content: "\F1FC";
color: black;
margin-left: 15px;
}
<div class="parent">
<p></p>
</div>
This code works fine on chrome but doesn't work on safari. Half of the square is hidden by the p::before. Below is a screen shot on safari:
Below is the screenshot for chrome:
This is some kind of weird bug in Safari and pseudo elements. My solution for this issue was to counter the transform: rotateY(-2deg); on the parent pseudo element since it was causing the issue.
Add display: block; and transform: rotateY(1deg); to p::before. The small rotation doesn't seem to affect how the square looks and it fixes it for me in Safari.
.parent::before {
position: absolute;
content: '';
width: 40px;
height: 40px;
background-color: red;
border-radius: 10px 0px 0px 10px;
transform: perspective(5px) rotateY(-2deg);
z-index: -1;
}
p::before {
content: "\F1FC";
color: black;
display: block;
margin-left: 15px;
transform: rotateY(1deg);
}
<div class="parent">
<p></p>
</div>
I have used a pure css and svg toggle switch checkbox taken from here and =it worked perfectly on all browsers, until my Firefox was updated to the new Firefox Quantum (version 57.0), in which half of the switch was not drawn. My vectoring skills are admittedly low, I don't know Firefox Quantum well enough and I have no idea what's went wrong with it. Any help would be highly appreciated.
this is how it looks on Chrome and Explorer
and this is on Firefox Quantum
Looks like in Firefox Quantum the path that is being drawn is
<path class='shape' d='M88.256,43.76c12.188,0,21.88-9.796,21.88-21.88S100.247,0,88.256,0c-15.745,0-20.67,12.281-33.257,12.281'></path>
instead of the full path, which is
<path class='shape' d='M88.256,43.76c12.188,0,21.88-9.796,21.88-21.88S100.247,0,88.256,0c-15.745,0-20.67,12.281-33.257,12.281,S38.16,0,21.731,0C9.622,0-0.149,9.796-0.149,21.88s9.672,21.88,21.88,21.88c17.519,0,20.67-13.384,33.263-13.384,S72.784,43.76,88.256,43.76z'></path>
Looks like the browser ignored a big part of the path.
here is codepen and here is the full code:
html:
<div class='checkbox'>
<label class='checkbox__container'>
<input class='checkbox__toggle' type='checkbox'>
<span class='checkbox__checker'></span>
<span class='checkbox__txt-left'>On</span>
<span class='checkbox__txt-right'>Off</span>
<svg class='checkbox__bg' space='preserve' style='enable-background:new 0 0 110 43.76;' version='1.1' viewbox='0 0 110 43.76'>
<path class='shape' d='M88.256,43.76c12.188,0,21.88-9.796,21.88-21.88S100.247,0,88.256,0c-15.745,0-20.67,12.281-33.257,12.281,S38.16,0,21.731,0C9.622,0-0.149,9.796-0.149,21.88s9.672,21.88,21.88,21.88c17.519,0,20.67-13.384,33.263-13.384,S72.784,43.76,88.256,43.76z'></path>
</svg>
</label>
</div>
scss:
.ext-cross{
&:before, &:after{
content:"";
display: block;
position: absolute;
width: 14px;
height: 2px;
margin: 0 auto;
top: 20px;
left: 0;
right: 0;
background-color: #bf1e1e;
border-radius: 5px;
transition-duration: .3s;
}
&:before{
transform: rotateZ(45deg);
}
&:after{
transform: rotateZ(-45deg);
}
}
.ext-ok{
&:before, &:after{
background-color: #0cb018;
}
&:before{
width: 6px;
top: 23px;
left: -7px;
}
&:after{
width: 12px;
left: 5px;
}
}
//checkbox
.checkbox{
width: 100px;
margin: 0 auto 30px auto;
&__container{
display: block;
position: relative;
height: 42px;
cursor: pointer;
}
&__toggle{
display: none;
&:checked + .checkbox__checker{
left: calc(100% - 43px);
transform: rotateZ(360deg);
#extend .ext-ok;
}
}
&__checker, &__cross, &__ok{
display: block;
position: absolute;
height: 43px;
width: 43px;
top: -1px;
left: 0px;
z-index: 1;
#extend .ext-cross;
}
&__checker{
border-radius: 50%;
background-color: #fff;
box-shadow: 0px 2px 6px rgba(0,0,0,.5);
transition: .3s;
z-index: 2;
&:before, &:after{
transition-duration: .3s;
}
}
&__cross, &__ok{
&:before, &:after{
background-color: #ddd;
}
}
&__ok{
#extend .ext-ok;
left: calc(100% - 43px);
}
&__txt-left, &__txt-right{
display: block;
position: absolute;
width: 42px;
top: 15px;
text-align: center;
color: #fff;
font-size: 12px;
z-index: 1;
}
&__txt-right{
right: 0px;
}
&__bg{
position: absolute;
top: 0;
left: 0;
fill: #aaa;
width: 100%;
height: 100%;
}
}
UPDATE
It was not tested on older version of Firefox, that was a mistake.
According to the SVG specification, commas are only valid if a number is either side of them so
12.281,S3
is invalid and the path rendering terminates at the point of invalidity. Remove the invalid comma and the S command will be rendered too.
All versions of Firefox have behaved like this, it's not new with Quantum. If it renders in other browsers, it's those other browers that are buggy, not Firefox.
I'm quite new to coding so it's probably something really easy that I'm trying to do but can't get it to work.
I've made some arrows with css borders. Now I want to do a rectangle that is semi transparent behind each arrow.
Something like this
But with rectangles instead of the circle.
This is the code I've got so far :
<div id="arrow"></div>
#arrow {
display: block;
border-right: 2px solid; border-bottom: 2px solid;
width: 30px; height: 30px;
transform: rotate(-45deg);
border-color:black;
margin:auto;
display:block;
position:relative;
}
super easy way:
HTML:
<div id="arrowBox">
<div id="arrow"></div>
</div>
CSS:
#arrow {
display: block;
border-right: 2px solid; border-bottom: 2px solid;
width: 30px; height: 30px;
transform: rotate(-45deg);
border-color:black;
margin:auto;
display:block;
position:relative;
}
#arrowBox{
background:rgba(0,0,0,0.5);
display:inline-block;
padding:10px 15px 10px 0;
}
adjust padding to change the size of the box.
Instead of using the div as your arrow, try using the div as your rectangle (or circle if desired). You'll need background-color: rgba(0,0,0,0.4) or similar to get the "translucent black" effect.
Once that's done, put your arrow styles in the ::before pseudo-element. Use positioning to get it in the right place, but it should be pretty easy to get the arrow to appear. Don't forget content:'' to make the pseudo-element appear.
set css property to your rectangle div or any shape as,
{ opacity: 0.5;}
You can user pseudo-elements to add the box with no additional markup. As already suggested, use rgba to define the background color.
I made a fiddle with an example showing the result, with 4 arrows in different directions on different background colors: https://jsfiddle.net/7f6tg9s3/4/
Here is the arrows part:
.arrow {
display: inline-block;
position:relative;
width: 30px;
height: 30px;
}
.arrow::before {
content: ' ';
display: block;
background-color: rgba(0, 0, 0, 0.3);
position: relative;
width: 30px;
height: 30px;
margin-right: -30px;
margin-bottom: -30px;
z-index: 1;
}
.arrow::after {
content: ' ';
display: block;
box-sizing: border-box;
position: relative;
border-right: 2px solid;
border-bottom: 2px solid;
width: calc(25px / 1.41421);
height: calc(25px / 1.41421);
border-color: #fff;
z-index: 2;
}
.arrow.right::after {
transform: rotate(-45deg);
top: 6px;
left: 2px;
}
.arrow.left::after {
transform: rotate(135deg);
top: 6px;
left: 12px;
}
.arrow.up::after {
transform: rotate(-135deg);
top: 12px;
left: 7px;
}
.arrow.down::after {
transform: rotate(45deg);
top: 2px;
left: 7px;
}
I am trying to get following output (a large slash line between two numbers):
Following code works on Firefox and Chrome but doesn't work on Safari. Would there be any workaround for that?
Here's the code:
HTML:
<div class="wrap">
<div class="top">4</div>
<div class="bottom">15</div>
</div>
CSS:
.top {
display: block;
float: left;
font-size: 60px;
font-weight: 700;
}
.bottom {
display: block;
float: left;
font-size: 38px;
font-weight: 700;
margin-top: 70px;
position: relative;
width: 28px;
}
.bottom:before {
border-left: 1px solid;
content: "";
height: 66px;
position: absolute;
right: 0;
top: -35px;
transform: skew(-45deg);
transform-origin: left top 0;
width: 0;
}
JSFiddle Demo:
http://jsfiddle.net/pg4sxrc1/
Certain versions of Safari still require the use of the -webkit- prefix for transform and transform-origin, try adding the following definitions to your .bottom:before CSS:
-webkit-transform: skew(-45deg);
-webkit-transform-origin: left top 0;
jsFiddle Demo