Develop Reference

Create Slanted Div with just border , no background color

I have to create a slanted div and i have gone through many of the available content on internet but not getting the expected result.
I have attached the image(slanted Images) for expected slanted div. I want div to be look slanted using border but not using background color. In case of border one of the edge is not visible. Please, let me know how i can achieve it.
new Image (Attached Image for slanted div)
#slanted_div{
position: relative;
display: inline-block;
padding: 1em 5em 1em 1em;
overflow: hidden;
color: #08393A;
}
#slanted_div:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:1px #08393A;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
z-index: -1;
border-style: solid;
}
<div id="slanted_div"></div>

check if you can set fixed width and height to your #slanted_div and add an ::after selector to use it as bottom-left borders while ::before remains setting up and right borders. Leave you here a example of what I mean:
#slanted_div{
position: relative;
display: inline-block;
overflow: hidden;
width: 300px;
height: 100px;
}
#slanted_div::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px rgb(8, 57, 58) solid;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
z-index: -1;
}
#slanted_div::after{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 202px;
height: 100%;
border-bottom: 1px rgb(8, 57, 58) solid;
border-left: 1px rgb(8, 57, 58) solid;
border-right: 0;
z-index: -1;
}
<div id="slanted_div"></div>

Need to dynamically set width of an element and ::after [duplicate]

I have an element whose :before style has to be modified based on calculations.
export class Content extends React.Component {
render() {
return (
<div className="ring-base">
<div className="ring-left" style={{/* Change here */}}></div>
<div className="ring-right" style={{/* Change here */}}></div>
<div className="ring-cover">
<div className="ring-text">10%</div>
</div>
</div>
);
}
}
CSS Code:
.ring-base {
position: absolute;
height: 200px;
width: 200px;
border-radius: 50%;
background: red;
transform: rotate(90deg);
overflow:hidden;
}
.ring-cover {
position: absolute;
height: 180px;
width: 180px;
background: #fff;
border-radius: 50%;
top: 5%;
left: 5%;
}
.ring-cover .ring-text {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
font-size: 2em;
display: flex;
justify-content:center;
align-content:center;
flex-direction:column;
transform: rotate(-90deg);
}
.ring-right, .ring-left {
height: 100px;
width: 200px;
overflow: hidden;
position: absolute;
}
.ring-right:before, .ring-left:before {
height: inherit;
width: inherit;
position: absolute;
content: "";
border-radius: 100px 100px 0 0;
background-color: grey;
transform: rotate(0deg);
}
.ring-right {
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
transform: rotateZ(0deg);
}
.ring-left {
transform: rotate(180deg);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.ring-right:before {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
transform: rotate(0deg);
}
.ring-left:before {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
The ask is to be able to update the transform property for .ring-left:before and .ring-right:before via ReactJS.
If there is a way to not update the :before class and change the CSS to not make use of :before at all, then do suggest that as well.
Js-Fiddle

You can iterate document.styleSheets, set .style of .cssRules where .selectorText matches pseudo selector
let sheets = document.styleSheets;
let selector = "div::before";
let replacementContent = '"after"';
for (let sheet of sheets) {
for (let rule of sheet.cssRules) {
if (rule.selectorText === selector) {
rule.style["content"] = replacementContent;
}
}
}
div:before {
content: "before";
color: red;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 2px #000;
background: green;
width: 50px;
height: 50px;
display: block;
}
<div></div>

How to prevent css transform animation from jumping?

I try to create a slider using CSS transforms combined with .addClass() and .removeClass(). So far it works fine, except for one thing:
While I remove .behind and add .behinder (which is a stupid name for a class), the images on the right side jump instantly to the left side and than transition themselves to the right again.
This causes some kind of "flickering", as you can see in this snippet:
var slider = $('#slider');
// to the right
var slideRight = function() {
// switch state
var dumb = slider.find('.behinder.left');
slider.find('.behinder.right').removeClass('right').addClass('left');
slider.find('.behind.right').removeClass('behind').addClass('behinder');
slider.find('.center').removeClass('center').addClass('behind right');
slider.find('.behind.left').removeClass('behind left').addClass('center');
dumb.removeClass('behinder').addClass('behind');
}
$('#right').on('click', function(){
slideRight();
});
body, html {
margin: 0% 5%;
}
#card-slider-fullwidth {
display: block;
width: 80%;
height: 300px;
max-width: 500px;
}
#slider {
position: relative;
}
#slider img {
position: absolute;
top: 0;
z-index: 10;
left: 50%;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#slider img.center {
z-index: 50;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
#slider img.behind {
z-index: 30;
-webkit-transform: translateX(-50%) scale(0.9);
transform: translateX(-50%) scale(0.9);
}
#slider img.behind.left {
margin-left: calc( (100% - 200px) / 3 * -1);
}
#slider img.behind.right {
margin-left: calc( (100% - 200px) / 3);
}
#slider img.behinder {
z-index: 10;
-webkit-transform: translateX(0) scale(0.8);
transform: translateX(0) scale(0.8);
}
#slider img.behinder.left {
left: 0;
right: auto;
margin-left: calc( (100% - 200px) / 8 * -1);
}
#slider img.behinder.right {
left: auto;
right: 0;
margin-right: calc( (100% - 200px) / 8 * -1);
}
#right {
padding: 20px;
background: #000;
display: inline-block;
color: #fff;
font-weight: bold;
margin-bottom: 5px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="right">Switch, baby.</div>
<div id="card-slider-fullwidth">
<div id="slider">
<img src="https://unsplash.it/200/300/?image=100" alt="100" class="behinder left">
<img src="https://unsplash.it/200/300/?image=200" alt="200" class="behind left">
<img src="https://unsplash.it/200/300/?image=320" alt="300" class="center">
<img src="https://unsplash.it/200/300/?image=400" alt="400" class="behind right">
<img src="https://unsplash.it/200/300/?image=500" alt="500" class="behinder right">
</div>
</div>
How can I fix this?
There is a CODEPEN DEMO as well.

Ok actually the solution was quite simple. I have used two properties, to position the elements:
margin-left: x;
transform: translateX();
As at one point I have removed translateX(); completely, the images have been jumping. So to solve this problem, I rearranged the layout using only margin-left to offset the images.
You can check the working solution with an update of the scss:
img {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
transition: all .3s ease-in-out;
&.center {
z-index: 50;
margin-left: 0;
}
&.behind {
z-index: 30;
margin-left: -20px;
transform: translateX(-50%) scale(.9);
&.right {
margin-left: 20px;
}
}
&.behinder {
z-index: 10;
margin-left: -40px;
transform: translateX(-50%) scale(.8);
&.right {
margin-left: 40px;
}
}
}

Diagonal background html and css

Hey guys I was wondering if you guys could help me for some code that I was interested in. In different websites like udacity, or a website that my friend is making (he won't show me the code) they have diagonal backgrounds. Or maybe you could call it diagonal shapes, or whatever it is I'm just wondering how to create it. An example would be the home page of udacity. They have the background split and I was wondering how to do it (I'm not worried about the gradient) https://www.udacity.com/

.hero--homepage::before {
content: '';
width: 100%;
height: 300px;
z-index: -1000;
background: linear-gradient(160deg, #02CCBA 0%, #AA7ECD 100%);
transform-origin: left bottom;
position: absolute;
top: 0;
left: 0;
-webkit-transform: skew(0deg, -15deg);
-moz-transform: skew(0deg, -15deg);
-ms-transform: skew(0deg, -15deg);
-o-transform: skew(0deg, -15deg);
transform: skew(0deg, -15deg);
}
<div class = "hero--homepage"></div>

This should work,
.wrap {
postion: relative;
background-color: #fff;
width: 100%;
}
.bg:before {
content: '';
position: absolute;
width: 100%;
height: 400px;
background-color: #000;
transform-origin: left bottom;
top: 0;
left: 0;
-webkit-transform: skew(0deg, -30deg);
-moz-transform: skew(0deg, -30deg);
-ms-transform: skew(0deg, -30deg);
-o-transform: skew(0deg, -30deg);
transform: skew(0deg, -30deg);
}
<div class="wrap">
<div class="bg"></div>
</div>

Div's border isn't a straight line after rotating in Firefox in Mac

I have a div which has two child div's, one div on the screen plan and other vertically perpendicular to the screen.
I try to rotate the div along Y axis for about 30 degrees. keeping its transform-style 3d preserved.
When doing it, in Firefox the border isn't a straight line anymore. It looks like this
For closer view
I happen to use the following code
.holder {
position: relative;
top: 0;
left: 0;
width: 200px;
height: 226px;
perspective: 2000px;
-moz-perspective: 2000px;
}
.box {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 226px;
background-color: transparent;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform: translateZ( -100px ) rotateY(30deg);
-moz-transform: translateZ( -100px ) rotateY(30deg);
transition: transform 0.5s;
-moz-transition: transform 0.5s;
}
.box div {
position: absolute;
margin: 0;
display: block;
}
.box .front {
left: 0;
right: 0;
top: 0;
bottom: 0;
transform: rotateX(0deg) translateZ(10px);
-moz-transform: rotateX(0deg) translateZ(10px);
background-color: grey;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.box .left {
left: 0;
top: 0;
bottom: 0;
width: 20px;
transform: rotateY(-90deg) translateZ(10px);
-moz-transform: rotateY(-90deg) translateZ(10px);
background-color: black;
background-size: cover;
background-position: left;
background-repeat: no-repeat;
}
<div class="holder">
<div class="box">
<div class="front"></div>
<div class="left"></div>
</div>
</div>
Please let me know if I'm missing anything.
Picture of the link provided in one of the answers :

It's a Firefox aliasing problem, you can add
outline: 1px solid transparent;
as a workaround to .box .front.

I got a work around for your issue reference.
Try filter for the div having class="box".
Basically this is used for svg elements but it is working for your case as well.
filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="gaussian_blur"><feGaussianBlur in="SourceGraphic" stdDeviation="0" /></filter></defs></svg>#gaussian_blur');
Tested in latest version of Opera, FF and Chrome for both mac and windows.
Working Demo here

I'm not sure why using translateZ inside a transformed element is not works properly on FF.
Adding outline: 1px solid transparent; is not working, but adding border: 1px solid transparent; to the .box will working, with removing transform: rotateX(0deg) translateZ(10px); from the .box .front.
Example:
.holder {
position: relative;
top: 0;
left: 0;
width: 200px;
height: 226px;
perspective: 2000px;
-moz-perspective: 2000px;
}
.box {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 226px;
background-color: transparent;
border: 1px solid transparent;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform: translateZ( -100px ) rotateY(30deg);
-moz-transform: translateZ( -100px ) rotateY(30deg);
transition: transform 0.5s;
-moz-transition: transform 0.5s;
}
.box div {
position: absolute;
margin: 0;
display: block;
}
.box .front {
left: 0;
right: -4px;
top: 0;
bottom: 0;
/* transform: rotateX(0deg) translateZ(10px); */
/* -moz-transform: rotateX(0deg) translateZ(10px); */
background-color: grey;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.box .left {
left: 0;
top: 0;
bottom: 0;
width: 20px;
transform: rotateY(-90deg) translateZ(10px);
-moz-transform: rotateY(-90deg) translateZ(10px);
background-color: black;
background-size: cover;
background-position: left;
background-repeat: no-repeat;
}
<div class="holder">
<div class="box">
<div class="front"></div>
<div class="left"></div>
</div>
</div>