I'm trying to make a corner block, to create a one-page as in the photo below. But I ran into a problem.
I tried to make div slopes, but when looking at different resolutions it looked crooked.
What i need screen
(there was also a problem in that before these inclined divs there was a background image and some holes that left this div, the picture showed through.)My Fail Screen
.tri-index-right {
background: #fff;
height: 150px;
width: 100%;
transform: skewY(4deg);
overflow: hidden;
position: relative;
z-index: 2; /*fail method*/
}
I can not understand how to extend this angle using the CSS method at width 100%.
.1 {
min-width: 500px;
}
#triangle-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 100px solid red;
border-bottom: 100% solid transparent;
}
<div class="1">
<div id="triangle-left"></div>
</div>
I will be very grateful for the help
You can use vw for full width or use svg
.one {
width: 100%;
height: 200px;
background: url('https://imgur.com/a/kA3XA') center center no-repeat;
background-size: cover;
}
#triangle-left {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 100vw solid red;
}
<div class="one">
<div id="triangle-left"></div>
</div>
you can also use svg for this
.main {
position: relative;
min-height: 200px;
}
.svg-container svg {
width: 100%;
height: 150px;
fill: #333; /* change color to white since */
}
<div class="main">
<!-- main image -->
</div>
<div class="svg-container">
<svg xmlns="https://www.w3.org/2000/svg" version="1.1" class="separator" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 L100 0 L100 100 Z"></path>
</svg>
</div>
you can also use multiple background image including a sharp gradient :
header {
min-height: 4em;
background:
/* first the mask */
linear-gradient(to bottom right, transparent 49.5%, white 50.5%) bottom left no-repeat,
/* then the background image */
url(http://lorempixel.com/400/300/abstract/1) 0 0;
/* finally resize each image, in particular the mask */
background-size: 100% 4em, cover;
padding: 1em 2em 4em;
color: white;
}
body {
margin: 0;
}
div {
padding: 1em;
}
<header>
<h1>whatever</h1>
</header>
<div>next content</div>
Related
I'm Trying to customize a box shadow to shape like a triangle behind an image. Like this:
But i don't know if theres a way to doing it using box shadow.
This is my code so far.
#image{
width: 200px;
box-shadow: -10px 10px #ff9900;
}
<img src="https://placeimg.com/200/180/any" id="image" />
A simple border with gradient will do it and it will be responsive:
#image {
border: 10px solid transparent;
border-image: linear-gradient(to bottom left, transparent 60%, #ff9900 60.5%) 10;
}
<img src="https://placeimg.com/180/150/any" id="image" />
<img src="https://placeimg.com/250/150/any" id="image" />
Almost the same but with background:
.box{
width:200px;
height:150px;
padding:10px; /*control the space*/
background:
url(https://placeimg.com/180/150/any) center/cover content-box,
linear-gradient(to bottom left, transparent 60%, #ff9900 60.5%);
}
<div class="box"></div>
I think the box-shadow property cannot be modeled to be a format different than your father element.
For example, you cannot make a triangle shadow for a square image, like your question.
Try to make a triangle in css and make that with a realative position. Then, use your image with a absolute position.
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
position: relative;
margin-top: 30px;
}
#image {
position: absolute;
top: 20px;
left: 17px;
}
<div id="triangle-bottomleft"></div>
<img src="https://placeimg.com/100/100/any" title="title of image" alt="alt of image" id="image">
I hope this will helpu.
I would suggest nesting the triangle and refrain from using position: absolute; in this case:
#img {
position: relative;
width: 200px;
background: url(https://placeimg.com/200/150) no-repeat right top;
padding: 10px 10px 0 0;
}
#triangle {
position: relative;
border-bottom: 150px solid orange;
border-right: 200px solid transparent;
z-index: -1;
}
<div id="img">
<div id="triangle"></div>
</div>
If compatibility with IE is a non-issue you could also use clip-path:
#img {
position: relative;
width: 200px;
height: 150px;
background: url(https://placeimg.com/200/150) no-repeat right top;
padding: 10px 10px 0 0;
}
#triangle {
position: relative;
width: 100%;
height: 100%;
clip-path: polygon(0 0, 0% 100%, 100% 100%);
background-color: orange;
z-index: -1;
}
<div id="img">
<div id="triangle"></div>
</div>
I want my svg images to be on bottom of my block (position:absolute, bottom:0). But in Internet Explorer it doesn't work (displays in the center). I can set width and height to svg and it will work somehow, but it will broke on another device with smaller/bigger screen size. How can I resolve this problem? Thank you!
Here is the code codepen
.wrapper {
padding: 150px 20px 50px;
text-align: center;
color: #fff;
}
.main {
background-color: #000;
line-height: 48px;
position: relative;
}
svg {
position: absolute;
bottom: 0;
}
.left {
left: 0;
}
.right {
right: 0;
}
<div class="main">
<div class="wrapper">
<div class="text">Some text here</div>
<button>click</button>
</div>
<svg class="left" fill="#fff" viewBox="0 0 1300 150" width="50%">
<polygon points="0,0 0,150 1300,150"></polygon>
</svg>
<svg class="right" fill="#fff" viewBox="0 0 1300 150" width="50%">
<polygon points="1300,0 0,150 1300,150"></polygon>
</svg>
</div>
You can achieve the same with using either simple divs or with pseudo elements. The following is an example I created to demonstrate both approaches.
https://codepen.io/Nasir_T/pen/oEYYob
The example uses position along with border to set the bottom design the way your want. You can use the div solution if you want to place images in it or use the pseudo solution if only want to show arrow cut in the design at the bottom.
If you want a background image, why not use a background-image??
.wrapper {
padding: 150px 20px 50px;
text-align: center;
color: #fff;
}
.main {
background-color: #000;
line-height: 48px;
position: relative;
background-image: url('data:image/svg+xml,<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox="0 0 52 3" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 26,3 52,0 52,3 0,3" fill="#fff" /></svg>');
background-repeat: no-repeat;
background-position: center bottom;
}
<div class="main">
<div class="wrapper">
<div class="text">Some text here</div>
<button>click</button>
</div>
</div>
This can be accomplished using CSS alone.
We can make triangle shape in CSS. Stick a triangle at the bottom of your main container. Will give the same effect.
.wrapper {
padding: 110px 20px 50px;
text-align: center;
color: #fff;
}
.main {
background-color: #000;
line-height: 48px;
position: relative;
width: 1000px;
}
.arrow-down {
width: 0;
height: 0;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-top: 50px solid #000;
position:absolute;
bottom:-50px;
}
svg {
position: absolute;
bottom: 0;
}
.left {
left:0;
}
.right {
right:0;
}
<div class="main">
<div class="wrapper">
<div class="text">Some text here</div>
<button>click</button>
</div>
<div class="arrow-down">
</div>
</div>
Well, I'm trying to create an SVG section separator. It worked like this:
<section id="section1">
</section>
<svg width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L50 100 L100 0 Z" />
</svg>
<section id="section2">
</section>
So far, so good. But now, I want to add a background to section1, including the SVG "pick", in example:
All I've accomplished is (really bad results):
Adding a
background: url(img)
to the element
And:
Justing adding a BG to section1
Here is an approach using the same code as your example but the svg path is changed to an inverted triangle and absolutely positioned to the bottom of the section:
#section1{
position:relative;
background:url('http://i.imgur.com/k8BtMvj.jpg');
background-size:cover;
height:200px;
}
svg{
position:absolute;
bottom:-10px; left:0;
width:100%; height:100px;
display:block;
}
<section id="section1">
<svg width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L50 90 L100 0 V100 H0" fill="#2A80B9" />
</svg>
</section>
Variant with a gradient:
.element {
display: block;
position: relative;
width: 100%;
height: 200px;
background: linear-gradient(-164deg, transparent 75%, #2A80B9 75%, #2A80B9 100%), linear-gradient(164deg, transparent 75%, #2A80B9 75%, #2A80B9 100%), url(http://i.imgur.com/k8BtMvj.jpg);
background-size: auto, auto, cover;
overflow: hidden;
}
<div class="element"></div>
First of all, I'm well aware this doesn't answer the question directly, however the questioner stated in the comments that they're interested in a non-SVG solution as well, and for reasons explained later in the post, it's a much better way to tackle this problem.
section {
background: url('http://i.imgur.com/k8BtMvj.jpg');
background-size: cover;
height: 200px;
position: relative;
width: 600px;
}
section:after {
border-color: transparent #2a80b9;
border-style: solid;
border-width: 90px 300px 0; /* the first value is the height of the triangles, the second is half the width of the parent container */
content: '';
height: 10px; /* this is the height of the solid color underneath the triangles */
position: absolute;
bottom: 0;
}
<section></section>
This solution works by absolutely placing an element at the end of every section, overlaying that and rendering the required shapes by use of borders - by giving the top border a transparent color.
This has the following qualities compared to an SVG solution:
there's no need for extra markup in every section because of the universally applying rule
that also means it's easier to maintain, because you don't have to go through multiple html files, looking for stray SVGs (which is why style should go in CSS and not markup in the first place)
changing the shape of the SVG requires changing several values, while you only need to change a single CSS value for anything you want to do. The CSS rules are also much more human-readable than the SVG multi-line anchor points (this might be subjective)
Variant with two triangles
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.element {
position: relative;
width: 100%;
height: 200px;
background: url(http://i.imgur.com/k8BtMvj.jpg) no-repeat center top;
background-size: cover;
}
.element:before,
.element:after{
content: '';
position: absolute; bottom: 0;
width: 0;
height: 0;
border-style: solid;
}
.element:before{
left: 0;
border-width: 100px 0 0 55vw;
border-color: transparent transparent transparent #00f;
}
.element:after{
right: 0;
border-width: 0 0 100px 55vw;
border-color: transparent transparent #00f transparent;
}
<div class="element"></div>
Variant clip-path
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.element {
position: relative;
width: 100%;
height: 200px;
background: url(http://i.imgur.com/k8BtMvj.jpg) no-repeat center top;
background-size: cover;
}
.element:before{
content: '';
position: absolute; bottom: 0; left: 0;
width: 100%;
height: 100px;
background: #00f;
-webkit-clip-path: polygon(50% 95%, 100% 40%, 100% 100%, 0 100%, 0 40%);
clip-path: polygon(50% 95%, 100% 40%, 100% 100%, 0 100%, 0 40%);
}
<div class="element"></div>
I know html and css very well , i'm looking for something like this with css not with images ?
is there any trick that can do this with Css ?
HTML
<div id="zone-user-wrapper" class="zone-wrapper"></div>
CSS
.zone-wrapper{
background: none repeat scroll 0 0 #01b888;
height:150px;
}
i made a fiddle
Thx
You can try something like this:
Fiddle
HTML:
<div class="zone-wrapper"></div>
<div id="shape"></div>
CSS:
.zone-wrapper{
background: none repeat scroll 0 0 #01b888;
height:150px;
}
#shape {
height: 20px;
background-color: white;
border-top-left-radius: 5000px 300px;
border-top-right-radius: 5000px 300px;
top: -20px;
position: relative;
}
<------------------------------------------------------------ Edit ------------------------------------------------------------->
Replicating the one on this website as you requested.
Here, I've added the border-top-left-radius: 4000px 150px and border-top-right-radius: 4000px 150px; to .content and .seperator. Then, gave appropriate z-index to all elements. .content has the highest z-index value, .zone-wrapper has the lowest z-index value and .seperator is in the middle.
<--------------------[ Fiddle | Full Screen Demo | With the Image from your website ]-------------------->
HTML:
<div class="zone-wrapper"></div>
<div class="seperator"></div>
<div class="content"></div>
CSS:
body {
margin: 0 0;
}
.zone-wrapper{
background: url(http://s25.postimg.org/4lur4kk23/pattern.png) repeat scroll 0 0 #01b888;
height:180px;
z-index: 0;
}
.seperator {
height: 50px;
background-color: #00533D;
border-top-left-radius: 4000px 150px;
border-top-right-radius: 4000px 150px;
top: -47px;
width: 100%;
position: relative;
z-index: 1;
}
.content {
top: -90px;
position: relative;
height: 800px;
background-color: #93fbdf;
border-top-left-radius: 4000px 150px;
border-top-right-radius: 4000px 150px;
z-index: 2;
}
The Flexible Option with a single HTML element
I have focused on creating the shape with a:
single HTML element — <header></header>
flexible percentage units
The CSS
The :before and :after pseudo elements overlap to create the curve
The pseudo elements are given 100% width and will expand and retract
The box shadow helps smooth out the jagged curve and the textured background image distracts the eyes from the remaining jagged pixels
The left: -20px and padding-right: 20px hide the rounded corner and are cut-off with overflow: hidden
Image Attribution: The background image used in the example below is obtained from transparenttextures.com and was created by Atle Mo.
The Example
Open full-screen and watch it re-size.
body {
margin: 0;
}
header {
background: url(http://i.stack.imgur.com/TIgas.png);
height: 80px;
position: relative;
overflow: hidden;
}
header:after,
header:before {
content: '';
display: block;
background: #FFF;
height: 60%;
width: 100%;
position: absolute;
border-radius: 100% 100% 0 0;
top: 50%;
left: -20px;
padding: 0 20px;
box-shadow: inset 0 0 2px #333;
}
header:before {
background: #333;
margin-top: -5px;
}
<header></header>
.zone-wrapper{
background: none repeat scroll 0 0 #01b888;
height:150px;
border-radius: 40px 40px 40px 40px;
overflow:hidden;
}
.zone-wrapper2{
margin-top:10px;
display:inlin-block;
background: black;
height:130px;
border-radius: 40px 40px 40px 40px;
}
<div id="zone-user-wrapper" class="zone-wrapper">
<div id="div2" class="zone-wrapper2">
</div>
</div>
The trick is to have 2 divs. The first could be your actual header and another just beneath it having a border-radius property. So your whole header could be a wrapper around the 2.
Did some tinkering to the html of your code.
Added a div in the main header wrapper.
Check the image below:
Hope it is of help.
You can use something like this from (https://stackoverflow.com/a/4777943/3905567):
<div id="header">
<div id="cover-left"></div>
<div id="cover-right"></div>
</div>
http://jsfiddle.net/p2hH7/215/
This is a question for the CSS gurus. A trend at the moment seems to be to place an image in the background and then have a transparent content scroll over the top.
AIM
What technique is used to produce this result, where the top content is transparent and slides over a background image.
http://jsfiddle.net/spadez/2uUEL/9/embedded/result/
MY ATTEMPT
What I have tried to do is apply a background and then make the top section transparent on top of it.
http://jsfiddle.net/spadez/N9sCD/3/
body {
background-image"http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg";
}
#top {
height: 160px;
opacity:0.4;
filter:alpha(opacity=40);
}
#section {
height: 600px; background-color: blue;
}
QUESTION
How has this technique of a transparent div moving over a static background image been achieved in my first link and how can I reproduce it. It must be a CSS solution because it still works without javascript enabled.
Here's a FIDDLE
<div id="top">
<span class="mask">
<img src="https://app.h2ometrics.com/build/v0.1.1a/styles/img/chrome_logo.png" class="logo" alt="Chrome">
Link 3
Link 2
Link 1
</span>
</div>
<div class="section l">
</div>
<div class="section d">
</div>
#top {
background:url(http://www.hdwallpapers3d.com/wp-content/uploads/2013/06/6.jpg) fixed;
background-size: cover;
position: relative;
height: 400px;
}
#top a {
background: rgba(200,200,200,0.5);
display: block;
float: right;
margin: 10px 15px;
padding: 2px 5px;
text-decoration: none;
color: #111;
cursor: pointer;
border: 2px solid #ddd;
border-radius: 8px;
transition: color 0.2s ease-in;
}
#top a:hover {
color: #fff;
}
.mask {
background: rgba(0,187,255,0.5); /* or hex combined with opacity */
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 -5px 8px -3px #666; /* makes #top little inset */
}
.logo {
position: relative;
width: 60px;
height: 60px;
margin: 10px;
}
.section {
height: 600px;
}
.l {
background: #ddd;
}
.d {
background: #333;
}
Update #top content placed inside .mask which removes need for z-index.
You were essentially correct in building but your CSS has some errors.
body {
background: url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg') fixed; /* fixed stops background from scrolling */
background-size: cover cover; /* expands bg image to cover body */
}
#top {
height: 160px;
color: #fff; /* this just makes the text visible on your dark bg */
}
You don't need to set the opacity of #top because without a background set it will already be transparent.
Try this:
HTML - pushed the menu into its own div
<div id="top">
<div id="menu">
logo
link 1
link 2
</div>
</div>
<div id="section">
</div>
CSS - removed margin from body, set the background to a fixed position and to always cover the whole body, added background color to menu. Note that #top does not need a transparency as it is 100% transparent by default. If you want to get a 'colour washed' looking image it would be better to adjust the image itself rather than trying to re-create a colour overlay.
body {
margin: 0;
background: url("http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg") fixed;
background-size: cover;
}
#top {
height: 500px;
}
#menu {
padding: 10px;
background-color: #fff;
}
#section {
height: 600px; background-color: blue;
}