I need to create a box which has a rotated message on top with border-bottom, however I can't make it responsive. The bottom line should always go from border to border.
.holder {
width: 40%;
background-color: yellow;
height: 400px;
}
.rotated-text {
float: right;
text-align: center;
width: 25%;
border-bottom: 1px solid green;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
<div class="holder">
<div class="rotated-text">
<p>Hello! <br> This text is rotated</p>
</div>
</div>
I tried to use position: absolute or some clip-path but it didn't work out. Is should look something like this:
If it is not possible I guess I will have to use an image. Thanks!
I have a sample here. In this one the width and and height of rotated-text div is fixed. But it can stick to top right corner of its container always.
.holder {
width: 80%;
background-color: yellow;
height: 400px;
position:relative
}
.rotated-text {
position: absolute;
text-align: center;
width: 100px;
height: 65px;
border-bottom: 1px solid green;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
right:7px;
top: 26px;
background: red;
}
.rotated-text p{
margin:0;
}
.rotated-text:after{
content: "";
position: absolute;
left: -64px;
right:-63px;
bottom:0;
height: 1px;
background: green;
}
<div class="holder">
<div class="rotated-text">
<p>Hello! <br> This text is rotated</p>
</div>
</div>
Related
I need this hart to be half way red and half way white inside a solid black circle and also the color chance cant be gradual. I have been using linear gradient for colors but cant seem to get it just right also as soon as i add the black circle as back ground then the code goes up in flames.
.heart-shape{
position: relative;
width: 200px;
height: 200px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background-color: red;
}
.heart-shape:before,
.heart-shape:after{
position: absolute;
width: 200px;
height: 200px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background: repeating-linear-gradient(135deg,white ,white 20%,red 10px,red 25%);
}
#rcorners {
border-radius: 100px;
background: black;
padding: 20px;
width: 150px;
height: 150px;
}
.heart-shape:before{
bottom: 0px;
left: -100px;
}
.heart-shape:after{
top: -100px;
right: 0px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<br><br><br><br><br>
<div style="display: block;margin-left: auto;margin-right: auto;" class="heart-shape"></div>
</body>
</html>
This question already has an answer here:
two divs split with diagonal line - CSS
(1 answer)
Closed 2 years ago.
Please help in making 2 divs side-by-side (50% each) that covers the entire width of the page and that the middle is slanted/skewed (please see attached photo). I have seen a few examples of skewed divs and have had no luck trying to make it work for my needs - especially when changing the size of the browser window.
Thanks in advance for all your help.
.slantContainer{
display:flex;
flex-flow:row;
height: 300px;
}
.slantedShare{
background-color: #6179ff;
color: white;
position: relative;
width:100%;
padding: 10px 30px 10px 10px;
}
.slantedShare::after {
background: #6179ff;
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -2;
transform-origin: bottom left;
-ms-transform: skew(-10deg, 0deg);
-webkit-transform: skew(-10deg, 0deg);
transform: skew(-10deg, 0deg);
}
.slantedDonate{
background-color: #7b24f1;
color: white;
position: relative;
width:100%;
padding: 10px 30px 10px 10px;
}
.slantedDonate::after{
background: #7b24f1;
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
transform-origin: top left;
-ms-transform: skew(-10deg, 0deg);
-webkit-transform: skew(-10deg, 0deg);
transform: skew(-10deg, 0deg);
}
<div>
<div class="slantContainer">
<div class="slantedShare">
container for left div
</div>
<div class="slantedDonate">
container for right div
</div>
</div>
</div>
<table style="width:100%;">
<tr style="width:100%;">
<td style="width:50%;">
<div class="slantedShare">
Left Div inside Table
</div>
</td>
<td style="width:50%;">
<div class="slantedDonate">
right div inside table
</div>
</td>
</tr>
</table>
If you play with the z-index it works
.slantContainer{
display:flex;
flex-flow:row;
height: 300px;
}
.slantedShare{
background-color: #6179ff;
color: white;
position: relative;
width:100%;
padding: 10px 30px 10px 10px;
}
.slantedShare::after {
background: #6179ff;
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -2;
transform-origin: bottom left;
-ms-transform: skew(-10deg, 0deg);
-webkit-transform: skew(-10deg, 0deg);
transform: skew(-10deg, 0deg);
}
.slantedDonate{
background-color: #7b24f1;
color: white;
position: relative;
width:100%;
padding: 10px 30px 10px 10px;
z-index: 1;
}
.slantedDonate::before {
background: #7b24f1;
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
transform-origin: top left;
-ms-transform: skew(-10deg, 0deg);
-webkit-transform: skew(-10deg, 0deg);
transform: skew(-10deg, 0deg);
}
<div>
<div class="slantContainer">
<div class="slantedShare">
container for left div
</div>
<div class="slantedDonate">
container for right div
</div>
</div>
</div>
<table style="width:100%;">
<tr style="width:100%;">
<td style="width:50%;">
<div class="slantedShare">
Left Div inside Table
</div>
</td>
<td style="width:50%;">
<div class="slantedDonate">
right div inside table
</div>
</td>
</tr>
</table>
This can be done with a single div:
.slnt {
width: 50%;
min-width: 60vh;
height: calc(50vh / 2);
min-height: 20vw;
background-color: dodgerblue;
}
.slnt::before,
.slnt::after {
content: "";
display: inline-block;
height: 100%;
}
.slnt::before {
background-color: dodgerblue;
transform: skew(-20deg);
margin-right: -30px;
position: relative;
left: 8%;
width: 40%;
z-index: 1;
}
.slnt::after {
background-color: indigo;
width: 60%;
position:relative;
right: -31px;
}
<div class="slnt"></div>
I am stack with a css issue.
I would like my picture center in a div (the red one) with a size 50% of the div and also perfectly round...
here is my html code :
<ion-content class="masters">
<ion-row>
<div class="profil-img">
<img src="../../assets/img/tennis-club.jpeg" alt="">
</div>
</ion-row>
</ion-content>
here is my css code :
.profil-img img{
border-radius: 50%;
border: 3px solid white;
// position:absolute;
max-width: 50%;
max-height: 50%;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
}
.profil-img{
border: 2px solid black;
}
and here the result :
Thank you for the help!
I've tried out many things and now i got a solution.Could this solve your Problem?
.red {
position: relative;
width: 250px;
height: 250px;
background-color: #f00;
border: 2px solid #000;
}
.profil-img {
position: relative;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translateY(calc(-50% - 3px)) translateX(calc(-50% - 3px));
border: 3px solid #fff;
overflow: hidden;
}
.profil-img > img {
display: block;
position: absolute;
width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%) translateX(-50%);
}
<div class="red">
<div class="profil-img">
<img src="https://cdn.transportbox-katzen.de/wp-content/uploads/2016/03/katze-gewohnheitstier.jpg" alt="">
</div>
</div>
For perfectly round image, you have to specify the same width and height for the image.
.profil-img img{
border-radius: 50%;
border: 3px solid white;
display: inline-block;
height:200px;
width: 200px;
margin: 0 auto;
vertical-align: middle;
}
If you want the image to be centered vertically and horizontally, you may try the following:
.profil-img img{
border-radius: 50%;
border: 3px solid white;
display: inline-block;
position:relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height:200px;
width: 200px;
}
Please let me know if it worked for you.
I only want to hide elements thats overflowing on the top. In my document blue is the background img and the child is skewed div.
fiddle
<div class="parent">
<div class=child>
</div>
</div>
.parent {
margin: 50px;
height: 200px;
width: 200px;
background: red;
}
.child {
height: 200px;
width: 200px;
background: blue;
transform: skewY(20deg);
-webkit-transform: skewY(20deg);
-moz-transform: skewY(20deg);
-o-transform: skewY(20deg);
}
Need to add another parent with overflow: hidden:
.ovh-parent {
overflow: hidden;
}
.parent {
margin: 50px;
height: 200px;
width: 200px;
background: red;
margin-top: 0;
}
.child {
height: 200px;
width: 200px;
background: blue;
transform: skewY(20deg);
-webkit-transform: skewY(20deg);
-moz-transform: skewY(20deg);
-o-transform: skewY(20deg);
}
<div class="ovh-parent">
<div class="parent">
<div class=child>
</div>
</div>
</div>
Does this work out for you? See the preview below...
Preview
You would need to add another div outside of the parent that would help with hiding the overflow.
.overflow{
margin: 20px;
overflow: hidden;
height: 300px;
width: 200px;
position: relative;
}
.parent {
height: 200px;
width: 200px;
background: red;
position: absolute;
top: 0;
}
.child {
height: 200px;
width: 200px;
background: blue;
transform: skewY(20deg);
-webkit-transform: skewY(20deg);
-moz-transform: skewY(20deg);
-o-transform: skewY(20deg);
}
<div class="overflow">
<div class="parent">
<div class=child>
</div>
</div>
</div>
You don't need to add another ancestor if you use this trick:
Add overflow: hidden to hide overflow
Increase the height to avoid clipping the overflow at the bottom
Add a negative margin to prevent the previous step from affecting following contents
Use a background image instead of a background color. For example, use a gradient.
Use background-size to set the size of that background image. Do not repeat the background.
.parent {
overflow: hidden;
margin: 50px;
height: 300px;
margin-bottom: -100px;
width: 200px;
background: linear-gradient(red, red) no-repeat;
background-size: auto 200px;
margin-top: 0;
}
.child {
height: 200px;
width: 200px;
background: blue;
transform: skewY(20deg);
-webkit-transform: skewY(20deg);
-moz-transform: skewY(20deg);
-o-transform: skewY(20deg);
}
<div class="parent">
<div class="child"></div>
</div>
Lorem ipsum
I've created a circle that contains a text, and the text needs to always be centered. Simple enough, and I've found a lot of examples of this with words on one row using line-height for example.
My problem is that the text will sometimes contain one row, sometimes two and sometimes three and I can't get that to work.
Any ideas?
I've created a fiddle here with three examples.
HTML:
<div class="container">
<div class="splash">Lorem</div>
</div>
<div class="container">
<div class="splash">Lorem ipsum</div>
</div>
<div class="container">
<div class="splash">Lorem ipsum dolor</div>
</div>
CSS:
.container{
position: relative;
width: 70px;
display: inline-block;
}
.splash {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
height: 70px;
width: 70px;
background: green;
color: white;
position: absolute;
overflow: hidden;
display: table-cell;
text-align: center;
vertical-align: middle;
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}
see this http://jsfiddle.net/tdtx3cfe/2/, I got it working with a little different approach, inserting the text into the span and making it display:table-cell, vertical-align:middle, change the splash to display:table, this will work even if you want to keep splash absolute
<div class="container">
<div class="splash"><span>Lorem<span></div>
</div>
<div class="container">
<div class="splash"><span>Lorem ipsum<span></div>
</div>
<div class="container">
<div class="splash"><span>Lorem ipsum dolor<span></div>
</div>
.container{
position: relative;
width: 70px;
display: inline-block;
}
.splash {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
height: 70px;
width: 70px;
background: green;
color: white;
position: absolute;
overflow: hidden;
display: table;
text-align: center;
vertical-align: middle;
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}
span{
display:table-cell;
vertical-align: middle;
}
You could create an extra span tag inside .splash and center it via position absolute and transform translate trick
.container{
position: relative;
width: 70px;
display: inline-block;
}
.splash {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
height: 70px;
width: 70px;
background: green;
color: white;
position: absolute;
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}
.splash span {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
For a markup like this :
<div class="container">
<div class="splash"><span>Lorem</span></div>
</div>
An example: http://jsfiddle.net/tdtx3cfe/3/
As one of the options, you can align splash with flexible boxes:
.container {
width: 70px;
height: 70px;
display: inline-flex;
border-radius: 50%;
background: green;
justify-content: center;
align-items: center;
}
.splash {
color: white;
text-align: center;
transform: rotate(15deg);
}
body {
display: flex
}
I had to add body style to vertically align containers.
JSFiddle.