I need a help with writing css class. I want to create button as it is shown on image below. There is screenshot with dimensions.
First parallelogram is:
height: 52px;
width: 235px;
background: linear-gradient(180deg, #FEE195 0%, #FFD361 100%);
Second one:
height: 52px;
width: 26px;
left: 222px;
background: #FFFFFF;
Text is in the middle of the first one.
If you want to create a button with the "double parallelogram" background, your on the right track using linear-gradient. You can style a <button> element using linear-gradient with color stops to create the parallelogram background you shared. I used an arbitrary width: 180px but you can adjust your color stops in the linear gradient to whichever width you end up choosing.
body {
background-color: #252525;
}
button {
text-align: center;
display: block;
width: 180px;
height: 50px;
border: none;
background: linear-gradient(68deg, #000 0% 10%, #FEE195 10% 30%, #FEE195 30% 83%, #000 83% 86%, #fff 86% 90%, #000 90%);
}
<button class="custom-bg">Some Text</button>
Related
body {
height:100%;
background: linear-gradient(top, #d808a4 50%, black 50%);
background: linear-gradient(top, #d808a4 50%,black 50%);
background: linear-gradient(to bottom, #d808a4 50%,black 50%);
height: 229vh;
}
I want to horizontally split the background into two colors where one is black color. And I want the other one to be a gradient that goes from pink to purple, I have manage to split into purple and black, but i want a purple pink grandient, can someone help me?
#top-half {
position: absolute;
left: 0;
width: 100%;
height: 50%;
background-color: black;
}
#bottom-half {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 50%;
background: linear-gradient(90deg, rgba(255,0,209,1) 0%, rgba(151,0,255,1) 100%);
}
<div id="bottom-half"></div>
<div id="top-half"></div>
2 divs for each half
position: absolute and left: 0 and top: 50% sets the position
width: 100% sets it to screen width
height: 50% sets the height for each one to half the screen width
background-color: black obviously sets the background color to black, and background: linear-gradient(90deg, rgba(255,0,209,1) 0%, rgba(151,0,255,1) 100%) sets the background to a gradient (you can generate nice CSS gradients at https://cssgradient.io/ )
You cannot have multiple background, the newer one will overwrite the old ones. What you can do is to have multiple gradients in a single background such as (try scrolling):
body {
height: 200vh;
background:
linear-gradient(to bottom, transparent 50%, black 50%),
linear-gradient(100deg, #8a07ff, #f500d7);
}
You can do this with just one background setting.
This snippet separates out each of the CSS background settings to make it clearer what is going on.
The whole element gets a black background, then a background-image which is a linear-gradient is defined. This will sit on top of the black background-color. It is given a size and a position and is made not to repeat.
Obviously change the colors and the size to what you want.
.bg {
width: 100vw;
height: 100vh;
background-color: black;
background-image: linear-gradient(to right, purple, magenta);
background-size: 80% 50%;
background-position: center top;
background-repeat: no-repeat;
}
<div class="bg"></div>
I am using background: linear-gradient(110deg, #ecf0fa 60%, #223f5c 60%);
} and want to place an image instead of the second color to have the background image "cutted". Is this somehow possible with the linear gradient?
HTML:
<div class="background">
</div>
CSS:
.background {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(110deg, #ecf0fa 60%, #223f5c 60%);
}
Fiddle: https://jsfiddle.net/abosv38d/1/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I want to create a diagonal background image as seen in the attached image. I can create a diagonal line using linear-gradient however as I have two different angles this didn't work.
Using Linear Gradients:
This can be done using multiple background images and positioning them accordingly. In the snippet below I've used 3 different layers - one for the top angle (a triangle which is transparent for 50% and is colored for the rest), one for the middle which is essentially nothing but a solid colored rectangle, this is created using linear gradients as it is easier to control the dimensions of an image and finally one for the bottom angle (same approach as the top one but this has a different height and so different angle.)
The output is also responsive as you can see by hovering the element in the below snippet. In the 2nd div, I've set different colors for each image so that you can see how it is formed.
div {
height: 300px;
width: 100%;
background: linear-gradient(to bottom right, transparent 50%, lightblue 51%), linear-gradient(lightblue, lightblue), linear-gradient(to top right, transparent 50%, lightblue 51%);
background-size: 100% 30px, 100% calc(100% - 130px), 100% 100px;
background-position: top left, left 30px, bottom left;
background-repeat: no-repeat;
transition: all 1s ease; /* just for demo */
}
/* just for demo */
div {
margin-bottom: 10px;
}
div:hover {
height: 400px;
}
div:nth-of-type(2) {
background: linear-gradient(to bottom right, transparent 50%, lightblue 51%), linear-gradient(lightpink, lightpink), linear-gradient(to top right, transparent 50%, lightgreen 51%);
background-size: 100% 30px, 100% calc(100% - 130px), 100% 100px;
background-position: top left, left 30px, bottom left;
background-repeat: no-repeat;
}
<div></div>
<div></div>
Using SVG: recommended
This is the approach that I generally recommend and is the best. It involves creating the shape using SVG and then placing it absolutely behind the div element.
div {
position: relative;
height: 300px;
width: 100%;
}
svg {
position: absolute;
height: 100%;
width: 100%;
}
polygon {
fill: lightblue;
}
<div>
<svg viewBox='0 0 300 100' preserveAspectRatio='none'>
<polygon points='0,10 300,0 300,100 0,75z' />
</svg>
</div>
Using Clip-path:
Another approach that can be used is to position a pseudo-element behind the main div and then set a clip-path in the required shape to this pseudo-element.
Note: This snippet will currently work only in WebKit powered browsers. Firefox would need the clip-path to be created via SVG element whereas IE doesn't support it all.
div {
position: relative;
height: 300px;
width: 100%;
}
div:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
background: lightblue;
-webkit-clip-path: polygon(0% 5%, 100% 0%, 100% 100%, 0% 75%);
clip-path: polygon(0% 5%, 100% 0%, 100% 100%, 0% 75%);
}
<div></div>
CSS Perspective
You can use a CSS Perspective Transform to create the shape you want.
div {
margin-top: 25px;
width: 500px;
height: 150px;
transform: perspective( 800px ) rotateY( -25deg );
background: blue;
}
<div></div>
CSS Tricks Docs
Perspective - CSS | MDN
You can apply perspective to the parent container of the rotated div to give it 3-dimensional depth from the front of the viewport.
N.B. For the difference between transform: perspective(value) and perspective: value, see the CSS Tricks Almanac entry on perspective:
Important: Please note the perspective property doesn't affect how the element is rendered; it simply enables a 3D-space for children
elements. This is the main difference between the transform: perspective() function and the perspective property. The first
gives element depth while the latter creates a 3D-space shared by all
its transformed children.
After applying a 3-dimensional depth to the parent container using perspective, you can then apply rotateY to the div you want to rotate.
Working Example:
section {
position: relative;
width: 600px;
perspective: 800px;
transform: translateX(-60px);
}
div:nth-of-type(1) {
position: absolute;
top:30px;
left: 0;
width: 100%;
height: 100px;
background-color: rgb(235,250,255);
transform: rotateY(320deg);
}
div:nth-of-type(2) {
position: absolute;
top: 0;
left: 220px;
width: 120px;
height: 140px;
background-color: rgb(103,201,236);
box-shadow: 6px 6px 6px rgba(127,127,127,0.5);
}
div:nth-of-type(3) {
position: absolute;
top: 24px;
left: 340px;
width: 120px;
height: 140px;
background-color: rgb(255,255,255);
box-shadow: 6px 6px 6px rgba(127,127,127,0.5);
}
<section>
<div></div>
<div></div>
<div></div>
</section>
I just noticed this little glitch in my CSS, but the only browser that has trouble with it is Chrome.
The glitch is the flat grey color that appears on the left side of my #box
I made a JSFiddle to duplicate the error :
http://jsfiddle.net/mar6E/
I would like the gradient to be white (#ffffff), and then at the last 92% fade to #f4f4f4 then #dddddd.
This works fine until I add that image in there, and then set the position of the image to 10px 17px.
I guess Chrome positions the background gradient as opposed to all the other browsers.
Any workarounds / suggestions greatly appreciated! Thanks!
In your fiddle and in your code, you forgot to set the position that you talk about.
But my paranormal powers let me guess that you had:
#box {
height: 200px;
width: 200px;
background: url(http://braidio.com/images/icon-dashboard.png) no-repeat, linear-gradient(to right, #ffffff 80%, #f4f4f4 92%, #dddddd 100%);
border: 1px solid blue;
background-position: 10px 17px;
}
When you should have had:
#box {
height: 200px;
width: 200px;
background: url(http://braidio.com/images/icon-dashboard.png) no-repeat, linear-gradient(to right, #ffffff 80%, #f4f4f4 92%, #dddddd 100%);
border: 1px solid blue;
background-position: 10px 17px, 0px 0px;
}
If you set only a background position, it affects the 2 backgrounds ...
I have a weird problem at hand and I am struggling to find a solution.
I have created a triangle <div> "container" using only CSS but what I would like now is to insert some text inside the container.
The solution I am aiming for has to contain the text within the boundaries of the triangle no matter how much text is inserted as I am looking to create thumbnails.
An example can be found here [note; this example is very basic and only shows the way I have chosen to create the triangle]
Pushing it a little further, I want to create one triangle facing up and one facing down and the text has to be at the base of each one, so for the 1st triangle the text will be at the bottom and for the 2nd at the top, plan B is just to center the text within the triangle both vertically and horizontally.
CSS:
.up {
text-align:right;
width: 0px;
height: 0px;
border-style: inset;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent #007bff transparent;
float: left;
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
HTML:
<div class="up">
<p>some information text goes here<p>
</div>
For your plan B (to center the text within the triangle both vertically and horizontally), which I prefer as solution, you could add this css rule:
.up p {
text-align: center;
top: 80px;
left: -47px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
}
Try it here:
.up {
width: 0px;
height: 0px;
border-style: inset;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent #007bff transparent;
float: left;
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
.up p {
text-align: center;
top: 80px;
left: -47px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
}
<div class="up">
<p>some information text goes here
<p>
</div>
View on JSFiddle
How can you fit text inside the triangle, no matter how much text there is? As far as I know, it is not possible with CSS alone. The text that can't fit in will overflow, and you'd need to use Javascript to adjust the font size accordingly to fit all of them.
But suppose that you want a reasonable amount of text to fit inside a right triangle (base is on the left, pointing to the right), here is an approach:
create a container with fixed width and height to hold the text, and the shapes.
inside the container, create two divs floated to the right. Each has width 100% and height 50%, shape-outline and clip-path as polygon.
give these divs background color similar to the background of the rendered page.
The idea is that the part outside these two divs will take the shape of a triangle we are looking for.
In CSS, elements are rectangles, where you realize it or not. It's not about drawing a triangle. It's about creating neighboring elements that suggest a triangle. Hope that makes sense.
.main {
width: 400px;
height: 200px;
position: relative;
background: peachpuff;
}
.top, .bottom {
width: 100%;
height: 50%;
background: white;
}
.top {
-webkit-shape-outside: polygon(0% 0, 100% 0%, 100% 100%);
shape-outside: polygon(0% 0, 100% 0%, 100% 100%);
float: right;
-webkit-clip-path: polygon(0% 0, 100% 0%, 100% 100%);
clip-path: polygon(0% 0, 100% 0%, 100% 100%);
}
.bottom {
height: 50%;
float: right;
bottom: 0;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%);
shape-outside: polygon(0% 100%, 100% 100%, 100% 0%);
}
<div class="main">
<div class="top"></div>
<div class="bottom"></div>
<p>
When should one use CSS versus SVG? Use CSS for simple shapes. HTML elements are rectangles, so all you are doing is creating an illusion of shapes. Sometimes this can become a deep rabbit hole. Instead, use SVG for complex shapes.
</p>
</div>