I know with some border tricks, I could create trapezoid shape. I can also set its border-color to rgba(r,g,b,a) to make it transparent.
But is it possible to create trapezoid that has transparent borders and background ?
See below image for an example,
Currently, I use some png images to achieve this effect，but generating images of different sizes is really boring work，so I'm looking for a css soluation。
Personally, I think it's overkill, but it can be done like this:
demo
HTML:
<div class='outer'>
<div class='content'><!--stuff here--></div>
<div class='label l1'></div>
<div class='label l2'></div>
</div>
CSS:
.outer {
position: relative;
width: 500px; /* whole thing breaks if this is not a multiple of 100px */
border: solid .5em rgba(0,0,255,.5);
border-bottom: solid 0px transparent;
margin: 7em auto 0;
background: rgba(0,0,0,.5);
background-clip: padding-box;
}
.outer:before, .outer:after {
position: absolute;
top: 100%;
height: .5em;
background: rgba(0,0,255,.5);
content: ''
}
.outer:before { left: -.5em; width: 15%; border-left: solid .5em transparent; }
.outer:after { right: -.5em; width: 55%; border-right: solid .5em transparent; }
.content {
padding: .5em;
margin: 1.5em;
border-bottom: solid 1.5em transparent;
background: lightblue;
background-clip: padding-box;
}
.label {
overflow: hidden;
position: absolute;
top: 100%;
width: 15%;
height: 3em;
}
.l1 { left: 15%; }
.l2 { left: 30%; }
.label:before {
position: absolute;
top: -.5em;
width: 100%;
height: 2.5em;
border: solid .5em rgba(0,0,255,.5);
background: rgba(0,0,0,.5);
background-clip: padding-box;
content: '';
}
.l1:before { left: 9%; transform: skewX(30deg); }
.l2:before { right: 9%; transform: skewX(-30deg); }
It works in Firefox, Chrome, Opera and Safari (I was afraid to test it in IE9, though both transform and background-clip work) but only if the width for .outer has a value that's a multiple of 100px.
Unless using a width that's a multiple of 100px, it only works in Firefox and Chrome (there is a little glitch in Chrome - could be fixed by using a WebKit-only left to right linear gradient that sharply goes from transparent to that semitransparent blue really close to the start).
It breaks in Opera and Safari (if using a width that is not a multiple of 100px):
You can make the bg color and border colors transparent, but the borders will not follow the shape of the trapezoid:
http://jsfiddle.net/Kyle_Sevenoaks/UZbJh/1/
So your best bet is to stick with the pngs for now.
Related
I have a design. In this design, one is overlapping on another image. I have created some code to try as given in the design. but it's not working for me. Click here to find the design
Below is some line of code of components. that is tried by me
<div className="container">
<Image className="container-img1" src={img1}/>
<Image className="container-img2" src={img2}/>
</div>
below is a style in scss
.container{
text-align: center;
.container-img1{
position: inherit;
left: 0;
top: 0;
height: auto;
border-radius: 50%;
border: 3px solid grey;
margin-right: -5rem;
}
.container-img1{
position: inherit;
left: 0;
top: 0;
height: auto;
border-radius: 50%;
border: 3px solid grey;
margin-left: -5rem;
}
}
Click Here to check what I have designed. but it's not looking as given in design.
How can I style the same as given in Design? And should be responsive also.
To achieve the demo image you can eliminate the border with transparency for the img2 that has higher stack order in DOM.
.container-img1 {
position: inherit;
left: 0;
top: 0;
height: 7rem;
border-radius: 50%;
border: 3px solid grey;
/* Reduce the margin so that the border aligns properly */
margin-right: -1.1rem;
}
.container-img2 {
position: inherit;
left: 0;
top: 0;
height: 7rem;
border-radius: 50%;
border: 3px solid grey;
/* Reduce the margin so that the border aligns properly */
margin-left: -1.1rem;
/* make it transparent */
border-left-color: transparent;
}
To make it responsive, the image width seems very small but you need to adjust the width & margin according to the device size using media query.
I`m trying to make hover effect on a box like this image
I've tried using transparent top and left border but all i got was bottom border extra triangle pointing the other direction like in this
.news:hover {
transform: translateY(20px);
transform: translateX(-20px);
border-left: 20px solid transparent;
border-top: 20px solid transparent;
border-bottom: solid #F4698D 20px;
border-right: solid #F4698D 20px;
}
One solution would be to create a pseudo element using ::after. It sits in the bottom left, overlaying the border, and has it's own gradient background that resembles a triangle.
Because the width of the border is used to determine the height, width, and offset of the overlaying element, I've elected to store that number as a CSS variable.
:root {
--border-width: 10px;
}
div {
padding: 50px;
border-bottom: var(--border-width) solid transparent;
border-right: var(--border-width) solid transparent;
position: relative;
}
div:hover {
border-color: red;
}
div:hover::after {
content: '';
position: absolute;
display: block;
height: var(--border-width);
width: calc(2 * var(--border-width));
bottom: calc(-1 * var(--border-width));
left: 0px;
background: linear-gradient(to right top, white 50%, red 50%);
z-index: 2;
}
<div>Hover me!</div>
Borders create that shape that resembles a frame.
Another solution for this effect is to use :after and :before pseudo elements. You could let them prepared with opacity: 0, and then when hovering the element, make it to opacity: 1. Like this:
.news {
postision: relative;
}
.news:before { // the bottom line
bottom: -20px;
Left: 0;
height: 20px;
width: 100%;
}
.news:after { // the right line
right: -20px;
top: 0;
height: 100%;
width: 20px;
}
.news:after { // here are properties for both pseudo elements
content: '';
position: absolute;
visibility: hidden;
opacity: 0;
transition: .32s;
}
.news:hover {
transform: translate(-20px, 20px);
}
.news:hover:before, .news:hover:after {
opacity: 1;
visibility: visible;
}
Hope it helps.
Hello is it possible to make a image have a slanted right side border.
.fh {
border-right: 180px solid transparent;
}
<div class="fh"><img src="img/fh.jpg" style="max-height: 500px;"></div>
So what I basically want is this http://prntscr.com/glcq2l but with the image instead.
One possible solution is to have a div which you rotate and set overflow hidden. There is a wrap around it, just in case you want to use it it makes it easier to place the image.. fiddle to play around here (I left the borders just to help understand whats going on)
(The background image on the body is just there to show that the cut off corner is transparent and not a border or anything like that.)
body {
background-image: url(https://i.stack.imgur.com/xxGZk.jpg);
}
* { box-sizing: border-box; }
.wrap {
position: relative;
width: 400px;
height: 200px;
border: solid 2px black;
overflow:hidden;
}
.fh {
position: relative;
top: -5px;
left: -250px;
width: 600px;
height: 700px;
transform: rotate(45deg);
overflow: hidden;
border-top:solid 1px red;
border-bottom:solid 1px red;
border-left:solid 1px orange;
border-right:solid 1px lime;
}
.fh img {
position: absolute;
margin: -30px 0px 0 30px;
top: 0px;
left: 0px;
border:solid 2px green;
width: 400px;
height: 200px;
transform: rotate(-45deg);
}
<div class="wrap">
<div class="fh">
<img src="http://lorempixel.com/400/200/sports/1/" >
</div>
</div>
A lot of answers and possible solutions can also be found here: Cut Corners using CSS of course they need to be tweaked to your request.
I'm trying to make some text look a little more 3D by adding a shadow to it, but I can not make the shadow appear behind the text, I have tried switching it around but it always break in weird ways, the shadow is either on top or totally messed up, here is a JS Fiddle with my exact code:
https://jsfiddle.net/2azp5z36/2/
As you see the problem is that the shadow is in front of the text instead of behind the text.
If you have a better suggestion than my current method I'm interested, as long as the end result look the same (except for the placement of the shadow, obviously),
I only have 1 requirement: the code for the solution must only use: HTML, CSS and/or JavaScript (preferably HTML5 & CSS3).
h1.CV:before {
/*text-align: center;*/
background: none;
content: attr(data-text);
/*left: 0;*/
position: absolute;
text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.75); /*X,Y,BlurRadius,Color*/
top: 0;
z-index: -1;
}
h1.CV {
/* http://jsfiddle.net/2GgqR/258/ */
text-align: center;
font-size: 10em;
background-image: -webkit-linear-gradient(red, orange, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position:relative;
z-index: 0;
}
<h1 class="CV" data-text="CV">CV</h1>
It's because you're setting the z-index of the h1. Just leave it as z-index:auto and the negative z-index should work as intended. Note that based on the properties you're using, this effect will only work in a few browsers.
h1.CV:before {
/*text-align: center;*/
background: none;
content: attr(data-text);
/*left: 0;*/
position: absolute;
text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.75); /*X,Y,BlurRadius,Color*/
top: 0;
z-index: -1;
}
h1.CV {
/* http://jsfiddle.net/2GgqR/258/ */
text-align: center;
font-size: 10em;
background-image: -webkit-linear-gradient(red, orange, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position:relative;
z-index: auto;
}
<h1 class="CV" data-text="CV">CV</h1>
You're setting the text color to be transparent through -webkit-text-fill-color so that the background image can be used as the fill. The 'stacking order' means that the text itself is above anything in the background. The text-shadow is a property of the text, so it will also be above the background. I don't think this approach will work.
You'd probably need at least 1 more HTML element to make this work— would that be an acceptable solution?
Ok so, I hope this is what you wanted. I've tried to do it using 2 overlapping <h1> tags. Here is the JS Fiddle. Here is the code:
h1.CV:before {
/*text-align: center;*/
background: none;
content: attr(data-text);
/*left: 0;*/
position: absolute;
top: 0;
z-index: -1;
}
h1.CV {
/* http://jsfiddle.net/2GgqR/258/ */
text-align: center;
font-size: 10em;
background-image: -webkit-linear-gradient(red, orange, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
z-index: 0;
top: 20px;
}
h1.CV2:before {
/*text-align: center;*/
background: none;
content: attr(data-text);
/*left: 0;*/
position: absolute;
text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.75); /*X,Y,BlurRadius,Color*/
top: 0;
z-index: -1;
}
h1.CV2 {
/* http://jsfiddle.net/2GgqR/258/ */
text-align: center;
font-size: 10em;
background-image: -webkit-linear-gradient(red, orange, yellow);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
z-index: 0;
top: 20px;
}
<h1 class="CV2" data-text="CV">CV</h1>
<h1 class="CV" data-text="CV">CV</h1>
Thanks everyone for your suggestions, they have been very helpful!
The final solution that I will use comes from: Michael
in this thread: How do I combined CSS text-shadow and "background-image: -webkit-gradient"
And special thanks to: Stephen C
For pointing that tread out for me.
Additional thanks to: Joseph Marikle & Sankarsh Makam
For interesting working code solutions.
The final solution that I will use comes from Michael above and looks like this:
https://jsfiddle.net/2azp5z36/6/
h1 {
position: relative;
font-size: 100px;
text-align: center;
}
h1 div {
background-image: -webkit-gradient(linear, left top, left bottom, from(teal), to(black));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
width: 100%;
}
h1:after {
text-shadow: 5px 5px 2px #000000;
color: transparent;
}
.gradient-shadow:after {
content: attr(title); /* Pulls the text from the 'title' attribute to make the shadow */
}
<h1 class="gradient-shadow" title="Hello World">
<div>Hello World</div>
</h1>
I recently tried out the div with different shape like triangle trapezoid etc.
HTML:
<div class="triangle">HI nice to meet you guys</div>
CSS
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}
Previously, the content appears properly when the div is a square (height and width are 100px).
When I style the div to look like a triangle, then the content oveflows.
How can I make this one as proportional in order to appear properly inside the div.
See fiddle: http://jsfiddle.net/7qbGX/2/
Any suggestion would be great.
try this: LINK
.triangle{
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);
}
.triangle p {
text-align: center;
top: 80px;
left: -47px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
}
Your Height and width is 0. You won't fit any text into it. It will either overflow or you can set overflow to "hidden", but than you will not see anything cos the div have the size 0.
your div is invisible to see in your actual div try to give background-color to that div.
[see demo]http://jsfiddle.net/salwenikhil0724/7qbGX/6/
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
background-color:red;
}
.triangle p {
text-align: center;
top: 40px;
left: -47px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
}
This is for displayed text properly, you need to mentioned width property as follows:-
<div style="width: 10em; word-wrap: break-word;">
Some longer than expected text with antidisestablishmentarianism
</div>
for Horizontal scroll you can put overflow-x:hidden its up to you dear.