I want to create an overlay with css over one image like this:
but I only do a square overlay like this:
how I can make the first shape with css ??
here is my code:
.card-img-overlay {
position: absolute;
top: 0px;
right: 0px;
bottom: 0;
left: 150px;
padding: 1.25rem;
}
thank you for your answers :)
Check this out
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid #9020d1bb;
border-left: 100px solid transparent;
position: absolute;
}
#container {
position: relative;
}
#container #triangle-topleft,
#overlay {
position: absolute;
color: white;
right: 0;
}
<div id="container">
<div id="triangle-topleft"></div>
<div id="overlay">Microsoft</div>
</div>
I will go with a simple gradient and no need for any extra markup or the use of pseudo element:
body {
height: 100vh;
margin: 0;
background:
linear-gradient(to top right, transparent 50%, rgba(255, 0, 0, 0.5) 51%) 0 0/100% 200px no-repeat,
url(https://lorempixel.com/1000/1000/) center/cover;
}
div {
height:200px;
text-align:right;
color:#fff;
padding:10px;
font-size:25px;
}
<div>
<p>Some content</p>
</div>
Related
I want to make a responsive slanted div such that the output will be as required output
plz help.
Try with this skew.
body {
height: 100vh;
margin: 0;
background: orange;
}
body:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: blue;
transform: skew(296deg);
transform-origin: top;
}
<body>
<div>
</div>
</body>
You can use a linear-gradient background, specifying direction right bottom. That will adjust to different aspect ratios.
Here's a simple example:
* {
margin: 0;
padding: 0;
}
.bg {
background-image: linear-gradient(to right bottom, blue 0 50%, navy 50% 100%);
height: 50vh;
width: 100vw;
}
<div class="bg"></div>
I try to put a line on only one word. With changing its size and its position.
Here the result I would like to have:
I tried to use a span with background-image but no success.
https://jsfiddle.net/XZKS/193u9dam/
And other problem, background-image don't work when using local image.
My website arborescence:
_include
css
style.css
js
img
line.png
background-image: url("../img/line.png");
I hope someone could help me, thanks
Try this:
.myWordWithLine {
position: relative;
}
.myWordWithLine::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
height: 24px; // your line height
background-color: red; // your line color
}
Method #01:
You can use css linear-gradient() to draw this background:
Steps:
Create background image with linear-gradient().
Adjust its size with css background-size property.
Place it at the bottom position of the element with background-position css property.
Necessary CSS:
.line {
background: linear-gradient(to right, green, green) no-repeat;
background-size: 100% 5px;
background-position: left bottom 5px;
}
h3 {
font-size: 24px;
}
.line {
background: linear-gradient(to right, green, green) no-repeat;
background-size: 100% 5px;
background-position: left bottom 5px;
position: relative;
padding-top: 0;
padding-bottom:0;
}
<h3>MY <span class="line">BLOG</span></h3>
Method #02:
You can use ::before OR ::after pseudo element:
h3 {
font-size: 24px;
}
.line {
position: relative;
}
.line::after {
background: green;
position: absolute;
bottom: 5px;
z-index: -1;
content: '';
left: 0;
right: 0;
height: 5px;
}
<h3>MY <span class="line">BLOG</span></h3>
You can use this
http://codepen.io/B101844/pen/bgLPPb
html
<div class="main">MY
<div class="blog">
BLOG
<div class="underline"></div>
</div>
</div>
Css
.main{
font-size: 30px;
color: #1c3d93;
font-weight: 900;
}
.blog{
display: inline-block;
position: relative;
}
.underline{
position: absolute;
background-color: #91dfcf;
left: 0px;
right: 0px;
bottom: 7px;
z-index: -1;
height: 8px;
}
I am trying to make concave shaped top and bottom borders around a <div> like this:
My current CSS:
.div:after {
content:'';
position:absolute;
left:-600%;
width:1300%;
padding-bottom:1300%;
top:80%;
background:none;
border-radius:50%;
box-shadow: 0px 0px 0px 20px #f2f2f2;
z-index:-1;
}
But it only works only on the bottom border and sometimes disappears on mobile devices.
Here is JS Fiddle.
You can use :before and :after pseudo elements to draw this shape.
.div {
position: relative;
overflow: hidden;
padding: 50px 0;
}
.div-inner {
position: relative;
background: black;
height: 120px;
}
.div-inner:before,
.div-inner:after {
box-shadow: 0 0 0 80px #000;
border-radius: 100%;
position: absolute;
height: 150px; /* You can change height to increase or decrease concave radius */
content: '';
right: -20%;
left: -20%;
top: 100%;
}
.div-inner:after {
bottom: 100%;
top: auto;
}
<div class="div">
<div class="div-inner"></div>
</div>
This is a follow-up to his question: Center triangle at bottom of div full width responsively
Again I'm stuck with my CSS for a project involving divs with triangle borders at the bottom:
I want a row of cascading divs to look like this (lower tringle colored red for demonstration purposes):
My code now looks like this:
html, body {
padding: 0; margin: 0;
color: white;
}
.top {
background-color: #282C34;
height: 500px;
width: 100%;
position: relative;
}
.bottom {
background-color: #3B3E48;
height: 500px;
width: 100%;
}
.triangle {
border-left: 50vw solid transparent;
border-right: 50vw solid transparent;
width: 0;
height: 0;
bottom: -40px;
content: "";
display: block;
position: absolute;
overflow: hidden;
left:0;right:0;
margin:auto;
}
.upperTriangle {
border-top: 40px solid #282C34;
}
.lowerTriangle {
border-top: 40px solid red;
}
<div class="top">
<div class="triangle upperTriangle"></div>
</div>
<div class="bottom">
<div class="triangle lowerTriangle"></div>
</div>
<div class="top">
<div class="triangle"></div>
</div>
Code on JSFiddle: http://jsfiddle.net/rndwz681/
My problems:
I can't figure out how to align the triangles correctly on the z axis.
I can't figure out how to align the triangles correctly with the divs apart from the first one.
Thanks a lot in advance for the help.
Powered by CSS triangle generator
.container {
width: 100%;
overflow: hidden;
}
.block {
width: 100%;
height: 200px;
}
.block--arrow {
position: relative;
}
.block--arrow:before {
display: block;
content: '';
position: absolute;
top: 0;
left: 50%;
margin-left: -350px;
width: 0;
height: 0;
border-style: solid;
border-width: 100px 350px 0 350px;
}
.grey {
background: #626262;
}
.light-grey {
background: #999999;
}
.light-grey:before {
border-color: #626262 transparent transparent transparent;
}
.black {
background: #000000;
}
.black:before {
border-color: #999999 transparent transparent transparent;
}
<div class="container">
<div class="grey block"></div>
<div class="light-grey block block--arrow"></div>
<div class="black block block--arrow"></div>
</div>
By adding position:relative; to your .bottom class and adding z-index:100; to your .triangle class I was able to get your triangles to appear the way you want them to.
See my fiddle: http://jsfiddle.net/rndwz681/1/
z-index sets the "layer" that an object appears on (higher number = closer to the user). It can only be applied to 'positioned' elements, but your absolute-positioned triangles qualify.
I am implementing a website which have a layout like below
I am a bit confuse about the HTML structure for this layout blue section is almost half divide my background and content will be centered and blue section will always be exactly divided in this ratio can anyone assist me how to make it possible. One more thing I need to use blue section as background color may be in RGBA.
A pseudo-element could work here
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
background-image: url(http://lorempixel.com/output/abstract-q-c-100-100-9.jpg);
}
body::before {
content: '';
position: absolute;
top: 0;
left: 50%;
height: 100vh;
width: 50%;
background: rgba(0, 0, 255, 0.5);
z-index: -1;
}
.navbar {
margin-top: 25px;
height: 50px;
background: green;
border: 1px solid black;
}
<div class="navbar"></div>
Place this DIV after body tag:
<body>
<div id="blue"></div>
content
</body>
body {
background:url('img');
height:100%;
width:100%;
}
#blue {
position: fixed;
top: 0;
left: 50%;
background: rgba(0, 0, 255, 0.35);
height: 100%;
width: 1000px;
}
JSFiddle