I would like to transform a div to apply it in front of a panel.
position: absolute;
font-size: 28px;
top: 203px;
left: 149px;
width: 661px;
height: 384px;
-webkit-transform: skewY(4.1deg) rotate(1deg);
background-color: red;
but on bottom right the div doesn't fill to the background.
What is the css property to set it correctly ?
You can add skewX to your css.
I tried this and almost filled the shape :
position: absolute;
font-size: 28px;
top: 203px;
left: 149px;
width: 641px;
height: 354px;
-webkit-transform: skewY(4.1deg) rotate(1deg) skewX(2deg);
background-color: red;
This code fixes the bottom right corner and takes other answers into consideration:
.background {
position: relative;
width: 960px;
height: 720px;
background-image: url('http://www.radiomelodie.com/actus/actu-08062017id7801.jpg');
}
.overlay {
position: absolute;
font-size: 28px;
top: 200px;
left: 149px;
width: 665px;
height: 395px;
-webkit-transform: skewY(3deg) skewX(1deg) rotate(0.9deg);
background: linear-gradient(359.2deg, transparent 6%, red 6%)
}
<div class="background">
<div class="overlay"></div>
</div>
Related
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
.fullscreen {
height: 100%;
width: 100%;
background: no-repeat url('https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg') center / cover;
}
.line_horiz {
position: absolute;
width: 3px;
height: 100%;
background-color: rgba(255, 255, 255, 1);
top: 0;
left: 50%;
}
.line_vert {
position: absolute;
width: 100%;
height: 3px;
background-color: rgba(255, 255, 255, 1);
top: 20%;
left: 0;
}
.logo-img {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
background: #ffffff;
transform: translate(-50%, -50%);
top: 20%;
left: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
.btn {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
}
.btn::after {
content: '';
display: block;
width: 60px;
height: 60px;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="fullscreen">
<span class="line_vert"></span>
<span class="line_horiz"></span>
<div class="logo-img">Logo img</div>
<div class="btn"></div>
</div>
As the horizontal and vertical lines are styling rather than informational content one suggestion is to remove them from the body of the HTML and instead create them using linear gradients on the background of the fullscreen element. That way they don't for example get looked at by screen readers. Also, using linear gradients means we can have 'gaps' in the lines where we want them.
This snippet just does the calculation of the gap for the btn element as the logo element has background white so it doesn't matter that the 'line' goes right across. If this changes then put in a linear gradient with gap calculations in a similar way to that done for the btn.
Note, box-sizing with content has been used and explicitly stated (so borders are included in the calculations and padding is set to zero) in case it has been altered elsewhere in the code.
body {
width: 100vw;
height: 100vh;
}
.fullscreen {
/* set up some variables to make it easier to change things later if you want to */
--logoMid: calc(20% - var(--borderW));
--btnW: 100px;
--btnMid: 50%;
/* position from the top to the middle of the btn */
--borderW: 3px;
--btnTop: calc(var(--btnMid) - (var(--btnW) / 2) - (var(--borderW) / 2));
/* actual position of top of btn element */
--btnBottom: calc(var(--btnTop) + var(--btnW) + var(--borderW));
box-sizing: content-box;
height: 100%;
width: 100%;
background-image: linear-gradient(white 0%, white var(--btnTop), transparent var(--btnTop), transparent var(--btnBottom), white var(--btnBottom), white 100%), linear-gradient(to right, white 0, white 100%), url('https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg');
background-size: var(--borderW) 100%, 100% var(--borderW), cover;
background-position: calc(var(--btnMid) - (var(--borderW) / 2)) 0, 0 var(--logoMid), center top;
background-repeat: no-repeat no-repeat;
margin: 0;
padding: 0;
position: relative;
}
.logo-img {
box-sizing: content-box;
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
background: #ffffff;
transform: translate(-50%, -50%);
top: 20%;
left: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.btn {
box-sizing: content-box;
margin: 0;
padding: 0;
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
}
.btn::after {
box-sizing: content-box;
content: '';
display: block;
width: 60px;
height: 60px;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="fullscreen">
<div class="logo-img">Logo img</div>
<div class="btn"></div>
</div>
Note: run the snippet in full screen as there won't be enough room to show the gap between the logo and btn on the small snippet viewport.
Here is my solution, Its not perfect, but it will give you a good starting points.
I have changes your HTML structure, by removing the divs that create the lines, Instead, I have used pseudo selectors to draw the lines.
Note that, you will have to tweak some of these numbers to properly fit your content.
Please run the example in full screen mode
.fullscreen {
height: 100vh;
width: 100%;
background: no-repeat url("https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg") center/cover;
}
.logo-img {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
background: #ffffff;
transform: translate(-50%, -50%);
top: 100px;
left: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
.logo-img:before {
content: "";
position: absolute;
height: 3px;
width: calc(50vw - 90px);
background-color: #ffffff;
top: 50%;
left: 130px;
display: block;
}
.logo-img:after {
content: "";
position: absolute;
height: 3px;
width: calc(50vw - 90px);
background-color: #ffffff;
top: 50%;
right: 130px;
display: block;
}
.btn {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
padding: 20px;
box-sizing: border-box;
}
.btn .inner {
width: 100%;
height: 100%;
background: white;
}
.btn:after {
content: "";
display: block;
width: 3px;
height: calc(50vh - 48px);
background: #ffffff;
position: absolute;
top: 100%;
left: 50%;
}
.btn:before {
content: "";
display: block;
width: 3px;
top: calc(-50vh + 220px);
background: #ffffff;
position: absolute;
bottom: 100%;
left: 50%;
}
<div class="fullscreen">
<div class="logo-img">Logo img</div>
<div class="btn">
<div class="inner"></div>
</div>
</div>
I need to create a circle with an image inside, so far I almost achieved this but I want set the content dimension too, this is my code:
.circle {
position: absolute;
z-index: 10;
top: -25%;
left: 50%;
border: 5px solid #a7151f;
margin: 0;
padding: 0;
height: 100%;
line-height: 0;
text-align: center;
text-transform: uppercase;
transform: translateX(-50%);
background-color: #a7151f;
width: 500px;
height: 400px;
border-radius: 50%;
content: url("logo");
}
<img class="img-responsive center-block circle">
this is a fiddle.
As you can see I have to display only half of the circle, but the problem is that the logo is not entire visible. How can I manage this?
To fix this you needed to give the img a z-index greater than the circles and then center it ontop of the circle.
Here's the code:
.circle{
background-color: red;
position: absolute;
top: -250px;
left: 50%;
border: 5px solid #a7151f;
margin: 0;
padding: 0;
height: 100%;
line-height: 0;
text-align:center;
text-transform: uppercase;
transform: translateX(-50%);
background-color: #a7151f;
width: 500px;
height: 400px;
border-radius: 50%;
}
.img {
content: url("https://www.google.it/logos/doodles/2019/rugby-world-cup-2019-opening-day-6753651837108235-l.png");
z-index: 10;
position: absolute;
left: 50%;
transform : translateX(-50%);
}
<div class="circle">
</div>
<div class="img">
</div>
here is the jsfiddle fix: http://jsfiddle.net/t5L49f7g/
Hope this helps!
I want to show <div class="fe"></div> in perfect center. When I use left: 50%; its works but not showing in perfect center.
.fe {
position: fixed;
bottom: 0;
left: 50%;
width: 150px;
height: 50px;
background-color: black;
}
Method 1:
Add transform: translateX(-50%).
body {
background: #ccc;
}
.fe {
transform: translateX(-50%);
background-color: black;
position: fixed;
width: 150px;
height: 50px;
bottom: 0;
left: 50%;
}
<div class="fe"></div>
Method 2:
Use negative margin equal to half of element width. i.e as you have width of .fe 150px so use margin-left: -75px
body {
background: #ccc;
}
.fe {
background-color: black;
margin-left: -75px;
position: fixed;
width: 150px;
height: 50px;
bottom: 0;
left: 50%;
}
<div class="fe"></div>
You can translate the element to move 50% left its own size:
transform:translateX(-50%);
Like this:
.fe {
position: fixed;
bottom: 0px;
left: 50%;
transform:translateX(-50%);
width: 150px;
height: 50px;
background-color: black;
}
instead of setting left to 50%, set left=0 and right=0 and margin=auto.. this will center automatically to center.
.fe {
position: fixed;
bottom: 0px;
left: 0;
right: 0;
margin: auto;
width: 150px;
height: 50px;
background-color: black;
}
Try using margin-left and margin-right as shown below
margin-left: auto;
margin-right: auto;
Setting both these to auto will center the division. For further info in this regard, you can refer this tutorial.
you can use property align="center" for div
.fe{ align="center"
}
Or in div you can define
<div class="fe" align="center"></div>
Try this Add transform: translateX(-50%); property to your code
.fe {
position: fixed;
bottom: 0px;
left: 50%;
width: 150px;
height: 50px;
background-color: black;
transform: translateX(-50%);
margin:auto;
}
I'm trying to create a background with two diagonal splits, with one over the other one.
I tried using two linear-gradient on the background but it didn't work.
Any can help me solve this with CSS?
This can be done using linear-gradient background images but it would need gradients instead of just one.
.diagonal-background {
height: 200px;
width: 200px;
background: linear-gradient(to bottom left, transparent 50%, #EEE 50.5%),
linear-gradient(to bottom right, transparent 50%, #CCC 50.5%);
/* just for demo */
line-height: 200px;
text-align: center;
}
<div class='diagonal-background'>
Some content</div>
1- You can do this (adjust your needs):
CSS
div {
display: inline-block;
background: #FCFCFE;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.bg1 {
position: absolute;
top: 50px;
display: inline-block;
transform: rotate(45deg);
width: 300px;
height: 300px;
left: -160px;
background: #F8F7FA;
z-index: 1;
}
.bg2 {
position: absolute;
top: 50px;
display: inline-block;
transform: rotate(-45deg);
width: 300px;
height: 300px;
right: -160px;
background: #F2F3F6;
z-index: 1;
}
HTML
<div>
<div class="bg2"></div>
<div class="bg1"></div>
</div>
DEMO HERE
2- Or you can use pseudo elements (adjust your needs):
CSS
div {
display: inline-block;
background: #FCFCFE;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
div:after {
position: absolute;
content:"";
top: 50px;
display: inline-block;
transform: rotate(45deg);
width: 300px;
height: 300px;
left: -160px;
background: #F8F7FA;
z-index: 1;
}
div:before{
position: absolute;
content:"";
top: 50px;
display: inline-block;
transform: rotate(-45deg);
width: 300px;
height: 300px;
right: -160px;
background: #F2F3F6;
z-index: 1;
}
HTML
<div></div>
DEMO HERE
I want to create the following shape:
Important: if I use "Border Radius" I get this (and I do not want this result):
Here are DEMO
HTML:
<div id="gray">
<div id="red"></div>
</div>
CSS:
#gray{
height: 100%;
background-color: #ccc;
overflow: hidden;
}
#red{
width: 150%;
height: 150%;
background-color: #f00;
border-radius: 100%;
top: 50%;
left: -25%;
right: 0;
position: relative;
}
Something like this would be roughly equivalent:
http://jsfiddle.net/ny4Q9/
css:
.curvetop {
position: relative;
margin-top: 80px;
background: red;
width: 100%;
height: 400px;
z-index: 1;
}
.curvetop:after {
top: -80px;
display: block;
position: absolute;
content: '';
border-radius: 50%;
background: red;
width: 100%;
height: 170px;
}
markup:
<div class="curvetop"></div>
By using border-radius with a value of 50% you can create a circle.. which, as per your question you can attach to the top of another element by way of a pseudo element.
You can use border radius
http://jsfiddle.net/wULyB/
<div id="out">
<div id="in"></div>
</div>
CSS
#out{
width: 100px;
height: 100px;
overflow: hidden;
background: green;
position: relative;
}
#in{
width: 200px;
height: 200px;
border-radius: 100px;
background: black;
position: absolute;
left: -50px;
top: 30px;
}
You can play around with the numbers but you get the idea