I have the following plunker where I have created a triangle using CSS.
CSS:
.triangle {
border: inset 6px;
content: "";
display: block;
height: 0;
width: 0;
border-color: transparent transparent red transparent;
border-bottom-style: solid;
position: absolute;
top: 50px;
left: 50px;
z-index: 89;
}
HTML:
<div class="triangle">
</div>
In my AngularJS project, this triangle is created when I call a dropdown directive as defined here.
The problem is that I want to give this triangle and the dropdown popup a box shadow. I am able to apply it on the popup (which is essentially just a 'ul' list) but I am struggling with the triangle. How can I apply box shadow to the triangle?
.triangle {
position: relative;
margin: 0;
box-sizing: border-box;
background: red;
box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.triangle::after {
content: "";
position: absolute;
top: 50px;
left: 50px;
width: 0;
height: 0;
box-sizing: border-box;
border: 6px solid black;
border-color: transparent transparent red red;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="triangle">
</div>
</body>
</html>
Here is the HTML and CSS to create the desired effect.
Since the triangle is actually a hack (three of the four borders of the block element are transparent), the box-shadow property will not work as expected, because it still sees the element to which you apply this 'hack' as rectangular, so the box-shadow is applied accordingly.
The result is in this fiddle.
.triangle:before {
border: inset 6px;
content: "";
display: block;
height: 0;
width: 0;
border-color: transparent transparent red transparent;
border-bottom-style: solid;
position: absolute;
top: 50px;
left: 50px;
z-index: 89;
box-shadow: 0px 0px 2px 2px #AAA;
}
<div class="triangle">
</div>
Related
Image I'm able to achieve the top right border radius as per this design but for the left border I'm a bit confused.
.inverted-border-radius::before {
content: "";
position: absolute;
background-color: transparent;
bottom: 38px;
right: 0;
width: 20px;
height: 20px;
background: #d6dcea;
-webkit-mask-image: radial-gradient(
circle 10px at 0 0,
transparent 0,
transparent 20px,
black 21px
);
box-shadow: 0 -25px 0 0 #f66969;
}
This is css that I'm using. I know that some changes on radial-gradient will do the trick but getting really confused here.
apply border-bottom
.card {
width: 200px;
height: 50px;
border-radius: 5px;
border: 1px solid #dfe2e6;
border-bottom: 5px solid #2091bd;
}
<div class="card">
</div>
I am creating a triangle with pointing towards bottom using html and css. Here I need to reduce the top width and increase the height of down pointer little bit, I tried with lots of modification, it does not work.
.triangle-with-shadow {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45deg);
bottom: 75px;
left: 25px;
box-shadow: -1px -1px 10px -2px rgba(0,0,0,0.5);
}
.triangle-with-shadow:hover, .triangle-with-shadow:hover:after {
box-shadow: none;
}
<div class="triangle-with-shadow"></div>
In CSS everything is treated as rectangle (BOX-MODEL). It’s annoying, but makes sense, If you try to apply box-shadow on rectangle layout, it's back-breaking task. So Instated of using box-shadow you can use Filter drop-shadow. Filters are not bound to the box model. That means the outline of our triangle is recognized and the transparency around it is ignored so that the intended shape receives the shadow.
Try this code:
.triangle-with-shadow {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
.triangle-with-shadow:after {
content: "";
position: absolute;
border-style: solid;
border-width: 40px 20px 0 20px;
border-color: #999 transparent transparent transparent;
-webkit-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
filter: drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.5));
}
.triangle-with-shadow:hover,
.triangle-with-shadow:hover:after {
box-shadow: none;
}
<div class="triangle-with-shadow"></div>
How to ignore transparent place on hover event ? In the first picture i need ignore "THIS PLACE". I need hover on rhombus works only.
<img src='http://s30.postimg.org/xpd6gwla9/1_Copy.jpg' id="first">
#first:hover {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
You can't. You might be able to using an SVG element (not in an <img> tag), but with a normal image the bounding box will always be rectangular, and any box shadows or other styles will be applied to that box instead of the contours of your image.
Instead of using image you can create your own rhombus and then apply hover to it like below
FIDDLE DEMO
<div id='container'>
<div id='diamond'></div>
</div>
CSS
#diamond {
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: red;
position: relative;
top: -100px;
}
#diamond:after {
content:'';
position: absolute;
left: -100px;
top: 100px;
width: 0;
height: 0;
border: 100px solid transparent;
border-top-color: red;
}
#diamond:hover {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
#container {
width:200px;
height:200px;
border:3px solid;
}
Hope this is what you were looking for
Demo
css
a {
display:block;
height:165px;
width:165px;
background:transparent;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform: rotate(45deg);
text-align: center;
margin: 37px;
}
.bg {
position: absolute;
background:url('http://s30.postimg.org/xpd6gwla9/1_Copy.jpg');
background-repeat: no-repeat;
height: 300px;
}
html
<div>
<div class="bg">
<div></div>
</div>
</div>
This is what i have got so far
After after checking out tutorial
I want know how curved effect is generated on divs the only question that i found near to what i was looking for was At here at stackoverlow but that too dint help
How folded edge effect is created on as in the above picture
Css
#MenuShape{
height:50px;
background-color:orange;
width:200px;
position:relative;
text-align:center;
left:100px;
}
#MenuShape:after{
content:"";
position: absolute;
width: 0;
height: 0;
left:200px;
border-top: 50px solid transparent;
border-left: 100px solid orange;
border-bottom: 0px solid transparent;
}
#MenuShape:before{
content:"";
position: absolute;
width: 0;
height: -50;
left:-100px;
border-top: 50px solid transparent;
border-right: 100px solid orange;
border-bottom: 0px solid transparent;
}
HTML
<div id="MenuShape" >
sachin
</div>
https://css-tricks.com/ this the site on inspecting it i found its span wrapped
anchor tag along with svg tag
<a href="/" class="home">
<svg viewBox="0 0 100 25" class="shape-tab">
<use xlink:href="#shape-tab"></use>
</svg>
<span>Blog</span></a>
Click here to see the unexpected behaviour it works fine in codepen
Here is a final demo (archived) on the folded corners:
and the following code is how you can create them:
.note {
position: relative;
width: 30%;
padding: 1em 1.5em;
margin: 2em auto;
color: #fff;
background: #97C02F;
overflow: hidden;
}
.note:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #658E15 #658E15;
background: #658E15;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
/* Firefox 3.0 damage limitation */
display: block;
width: 0;
}
.note.rounded {
-moz-border-radius: 5px 0 5px 5px;
border-radius: 5px 0 5px 5px;
}
.note.rounded:before {
border-width: 8px;
border-color: #fff #fff transparent transparent;
-moz-border-radius: 0 0 0 5px;
border-radius: 0 0 0 5px;
}
<div class="note"></div>
To create a curved wave effect you can use this code:
#wave {
position: relative;
height: 70px;
width: 600px;
background: #e0efe3;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: -5px;
top: 40px;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #e0efe3;
left: 0;
top: 27px;
}
<div id="wave"></div>
To achieve the curve you’ll need to inverse where it starts. Follow the same demo, just reverse your values.
See a live demonstration (archived) of how border radius can create the shapes and effects you want and adjust each corner to see it in action.
I have a css tooltip on my html. I get the arrow mark(bubble:after) at the bottom of my bubble. How can I re-arrange to right center of my bubble?
Here is my div
<div class="bubble">Hi there. I like turtles.</div>
<p style="margin-left: 1em;">Mikey sez</p>
The bubble which is displayed on my div is from the css below
<style type="text/css">
.bubble {
position: relative;
background-color:#eee;
margin: 0;
padding:10px;
text-align:center;
width:180px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
box-shadow: 0px 0 3px rgba(0,0,0,0.25);
}
.bubble:after { //This after mark has to be arranged so to point to the right of bubble
position: absolute; //The position should be at the center
display: block;
content: "";
border-color: #eee transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-19px;
left:1em;
}
Rearrange like below image
Check out this jsFiddle. All you need to do is change the absolute positioning of the ::after element, and switch which border has a colour, from this:
border-color: blue transparent transparent transparent;
bottom:-19px;
left:1em;
To this:
border-color: transparent transparent transparent blue;
bottom:25%;
right:-19px;
This will do the trick, http://jsfiddle.net/elclanrs/hu38A/1
.bubble:after {
content: "";
position: absolute;
border-color: transparent transparent transparent red;
border-style: solid;
border-width: 10px;
height: 0;
width: 0;
top: 50%;
margin-top: -10px; /* border-width */
right: -20px; /* border-width*2; */
}