I am trying to apply shadow to the whole shape. But the shape defined with ::after is not affected. How do i work with the shape as a unit?
style.css
.diag{
position: relative;
top: 0px;
left: 100px;
width: 150px;
height: 90px;
background-color: gray;
border-radius: 10px;
}
.diag::after{
content: "";
position: absolute;
left: -50px;
top: 35px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 50px solid gray;
border-bottom: 10px solid transparent;
}
.diag:hover{
box-shadow: 2px 2px 2px 2px;
}
You can try this:
.diag {
position: relative;
top: 0px;
left: 100px;
width: 150px;
height: 90px;
background-color: gray;
border-radius: 10px;
}
.diag::after {
content: "";
position: absolute;
left: -50px;
top: 35px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 50px solid gray;
border-bottom: 10px solid transparent;
}
.diag:hover {
box-shadow: 0px 0px 4px 4px black;
}
<div class="diag">
</div>
Related
HTML:
<div class="rectangle">Some text</div>
CSS:
.rectangle {
width: 300px;
height: 80px;
border: 5px solid red;
}
Is there any way to make div looks like in the photo?
You can use ::after and ::before to achieve the result.
.rectangle {
width: 300px;
height: 80px;
border: 5px solid red;
border-right: none;
position: relative;
}
/* for the triangular shape */
.rectangle::after {
content: "";
position: absolute;
right:-45px;
bottom: 0;
top:-5px;
width: 0;
height: 0;
border-left: 45px solid red;
border-top: 45px solid transparent;
border-bottom: 45px solid transparent;
z-index:1000;
}
/* for hiding the portion except the border
of the triangle shape */
.rectangle::before {
content: "";
position: absolute;
right:-40px;
bottom: 0;
top:0;
width: 0;
height: 0;
border-left: 40px solid white;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
z-index:1001;
}
<div class="rectangle">Some text</div>
In case you don't need border like structure then you can avoid ::before portion and set background color to main div.
.rectangle {
width: 300px;
height: 80px;
border: 5px solid red;
border-right: none;
position: relative;
background:red;
}
.rectangle::after {
content: "";
position: absolute;
right:-45px;
bottom: 0;
top:-5px;
width: 0;
height: 0;
border-left: 45px solid red;
border-top: 45px solid transparent;
border-bottom: 45px solid transparent;
}
<div class="rectangle">Some text</div>
For more shapes refer : CSS Tricks
To keep only the border without filling the div, You can try using ::before and ::after.
Something like this:
.rectangle {
width: 200px;
height: 40px;
position: relative;
border-top: 2px solid red;
border-bottom: 2px solid red;
border-left: 2px solid red;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
margin-left: 50px;
}
.rectangle::after {
content: "";
position: absolute;
left: 100%;
width: 0;
height: 0;
top: 2px;
border-top: 18px solid transparent;
border-left: 10px solid #fff;
border-bottom: 17px solid transparent;
}
.rectangle::before {
content: "";
position: absolute;
left: 100%;
width: 0;
top: -2px;
height: 0;
border-top: 22px solid transparent;
border-left: 14px solid red;
border-bottom: 22px solid transparent;
}
<div class="rectangle">Some text</div>
Consider rotating a pseudo-element by declaring a transform: rotate() property value, as demonstrated in the code snippet embedded below.
As an alternative to achieving the same behaviour declaring border property rules, this method allows borders to be declared on the element in an intuitive manner using only one pseudo-element.
Rotating an element in this way also gives you the option to fill in the element with a solid colour - allowing you more freedom in customization.
Code Snippet Demonstration:
.rectangle {
width: 300px;
height: 80px;
border: 5px solid red;
/* additional */
border-right: 0;
box-sizing: border-box;
position: relative; /* required */
}
/* Additional */
.rectangle:after {
content: "";
position: absolute;
width: 55px;
height: 55px;
border-right: 5px solid red;
border-top: 5px solid red;
box-sizing: inherit;
right: -28px;
top: 7px;
transform: rotate(45deg);
}
<div class="rectangle">Some text</div>
Check CSS Shapes
#pointer {
width: 200px;
height: 40px;
position: relative;
background: red;
}
#pointer:after {
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#pointer:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
<div id="pointer">
</div>
you have to use the pseudo class after
.rectangle {
position: relative;
width:200px;
height:40px;
margin-left:40px;
color:#FFFFFF;
background-color:red;
text-align:center;
line-height:40px;
}
.rectangle:after {
content:"";
position: absolute;
left: 100%;
top:0px;
width:0px;
height:0px;
border-top:20px solid transparent;
border-left:40px solid red;
border-bottom:20px solid transparent;
}
<div class="rectangle">Some text</div>
You can do it using :before and :after
.rectangle {
width: 300px;
height: 80px;
border: 5px solid blue;
border-right: none;
position: relative;
}
.rectangle::before {
content: '';
border-top: 5px solid blue;
width: 120px;
position: absolute;
right: -115px;
bottom: 16px;
transform: rotate(-21deg);
}
.rectangle::after {
content: '';
border-top: 5px solid blue;
width: 120px;
position: absolute;
right: -115px;
top: 16px;
transform: rotate(21deg);
}
<div class="rectangle">Some text</div>
Is there a way to achieve this border in CSS? I've got one DIV with list of bullet points and I need to wrap it in a border like the image.
You can first create one element with border except border-bottom and then use :before and :after pseudo-elements to add triangle border at bottom.
div {
width: 200px;
height: 150px;
border: 1px solid black;
border-bottom: none;
position: relative;
background: white;
margin: 20px;
}
div:after, div:before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 50px 101px 0 101px;
border-color: black transparent transparent transparent;
top: 100%;
left: -1px;
position: absolute;
}
div:after {
border-color: white transparent transparent transparent;
top: calc(100% - 1px);
}
<div></div>
Have a look at this Fiddle
Basically add this css to a div:
#base {
background: red;
display: inline-block;
height: 55px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 100px;
}
#base:after {
border-bottom: 35px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: 54px;
width: 0;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
try this one:
.down-arrow {
display: inline-block;
position: relative;
background: darkcyan;
padding: 15px 0;
width: 200px;
text-align: center;
}
.down-arrow:after {
content: '';
display: block;
position: absolute;
left: 0;
top: 100%;
width: 0;
height: 0;
border-top: 20px solid darkcyan;
border-right: 100px solid transparent;
border-bottom: 0 solid transparent;
border-left: 100px solid transparent;
}
DEMO HERE
Here is the code for the box:
.box {
background: #fff;
border: 1px solid #000;
display: inline-block;
height: 55px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 100px;
}
.box:after {
border-top: 35px solid #fff;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: '';
height: 0;
left: 0;
position: absolute;
top: 55px;
width: 0;
}
.box:before {
border-top: 35px solid #000;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: '';
height: 0;
left: 0;
position: absolute;
top: 56px;
width: 0;
}
<div class="box">
</div>
I hope it helps
I have a simple div on a page:
<div>Some Text</div>
Is it possible with CSS, to make something like this:
You can use this code to make a similar arrow
<div class="arrow_box">Arrow</div>
.arrow_box {
position: relative;
background: #20d568;
border: 10px solid #ffffff;
}
.arrow_box:after, .arrow_box:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(32, 213, 104, 0);
border-left-color: #20d568;
border-width: 70px;
margin-top: -70px;
}
.arrow_box:before {
border-color: rgba(255, 255, 255, 0);
border-left-color: #ffffff;
border-width: 84px;
margin-top: -84px;
}
There is even a website to produce similar snippet like the one mentioned above.
Hope this helps!
Here is the CSS and HTML markup you need to create this effect in your own project.
<!DOCTYPE html>
<html>
<head>
<meta>
<title>title</title>
<link>
<style type="text/css">
#base {
border: 3px solid #ccc;
background: red;
display: inline-block;
height: 30px;
position: relative;
width: 50px;
padding: 10px 0px 0px 10px;
}
#base:before {
border-bottom: 22px solid transparent;
border-left: 19px solid #ccc;
border-top: 22px solid transparent;
content: "";
height: 0;
right: -22px;
position: absolute;
top: -2px;
width: 0;
}
#base:after {
border-bottom: 20px solid transparent;
border-left: 17px solid red;
border-top: 20px solid transparent;
content: "";
height: 0;
right: -17px;
position: absolute;
top: 0px;
width: 0;
}
</style>
</head>
<body>
<div id="base" >
NEXT
</div>
</body>
</html>
HTML
<div class="textBox">
Text
</div>
CSS
body{
background:#000;
}
.textBox{
padding:10px;
background-color:green;
border-top:5px solid #fff;
border-bottom:5px solid #fff;
border-left:5px solid #fff;
width:50px;
color:#fff;
position: relative;
}
.textBox::after{
content: '';
position: absolute;
width: 30px;
height: 29px;
background: green;
border-top: 5px solid #fff;
border-right: 5px solid #fff;
transform: rotate(45deg);
top: 2px;
right: -18px;
z-index: -1
}
Codepen : http://codepen.io/swapnaranjitanayak/pen/mOWrzX
Sure can using a couple of pseudo elements. Example:
<div class="arrowBox">Some Text</div>
then use the following CSS (note, I've used a red border as opposed to white so I could see it):
.arrowBox{
width: 100px;
height: 50px;
background: green;
border: 5px red solid;
display: block;
position: relative;
line-height: 50px;
color: #fff;
text-align: center;
}
.arrowBox:before{
content: '';
width: 0;
height: 0;
position: absolute;
right: -34px;
top: -5px;
border-top: 30px solid transparent;
border-bottom:30px solid transparent;
border-left: 30px solid red;
z-index: -1;
}
.arrowBox:after{
content: '';
width: 0;
height: 0;
position: absolute;
right: -25px;
top: 0;
border-top: 25px solid transparent;
border-bottom:25px solid transparent;
border-left: 25px solid green;
}
Something for you to get started:
*{
box-sizing:border-box;
}
.wrapper{
border: 1px solid #ddd;
display:inline-block;
position:relative;
}
div.arrow {
height: 50px;
line-height: 50px;
width: 75px;
background: green;
position: relative;
text-align:center;
border: 1px solid #ddd;
margin: 10px;
color:white;
font-weight:bolder;
}
div.arrow:before {
content: '';
display: block;
position: absolute;
right: 0;
top: 0;
transform: translate(100%, 0);
height: 0;
width: 0;
border-left: 25px solid green;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
z-index:2;
}
div.arrow:after {
content: '';
display: block;
position: absolute;
right: -11px;
top: 50%;
transform: translate(100%, -50%);
height: 0;
width: 0;
border-left: 35px solid white;
border-top: 35px solid transparent;
border-bottom: 35px solid transparent;
z-index:1;
}
.wrapper:after {
content: '';
display: block;
position: absolute;
right: 0;
top: 50%;
transform: translate(100%, -50%);
height: 0;
width: 0;
border-left: 36px solid #ddd;
border-top: 36px solid transparent;
border-bottom: 36px solid transparent;
}
<div class="wrapper">
<div class="arrow">Text</div>
</div>
I need an arrow on the right side of the div but this one is not working.
Here is the fiddle:
https://jsfiddle.net/azb5m3r2/2/
The arrow correctly appears on the left side of the div, but I want it to appear on the right side (opposite side).
body {
font-family: Helvetica;
font-size: 13px;
}
div.callout {
height: 20px;
width: 130px;
/*float: left;*/
z-index: 1;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 20px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
//margin: 25px;
min-height: 20px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.top::before {
left: 0%;
bottom: -20px;
border-top: 11px solid #444;
}
.callout.bottom::before {
left: 45%;
top: -20px;
border-bottom: 10px solid #444;
}
.callout.right::before {
left: -20px;
top: 40%;
border-right: 10px solid #444;
}
/* .callout.left::after {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
*/
.callout.left:after {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
<div class="callout left">test</div>
This works on the left hand side
<div class="callout right">test</div>
Instead of this:
.callout.left::after {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
Use this:
.callout.left::before {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
And, optionally, for a perfectly centered arrow, use this:
.callout.left::before {
right: -20px;
top: 50%;
transform: translateY(-50%);
border-left: 10px solid #444;
}
revised fiddle
For an explanation of the centering technique, see this post: Element will not stay centered, especially when re-sizing screen
The callout.left must be ::before , not ::after or :after, Same as you give the .callout::before style.
The code should like this
.callout.left::before {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
I think you may try something like this:
.callout {
position: relative;
top: 0;
left: 0;
display: block;
padding: 10px;
}
.callout.right {
margin-left: 10px;
}
.callout.right::before {
position: absolute;
top: 50%;
left: 0;
width: 0;
height: 0;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #a8c3e5;
content: '';
}
.callout.right::after {
position: absolute;
top: 50%;
left: 2px;
width: 0;
height: 0;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #f9f9f9;
content: '';
}
.callout-inner {
padding: 2px;
width: 240px;
overflow: hidden;
background: black;
background: #a8c3e5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.callout-content {
padding: 14px;
margin: 0;
background-color: #f9f9f9;
color: #39569A;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
<div class="callout right">
<div class="callout-inner">
<div class="callout-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
#right {
background-color: #333;
height: 60px;
position: relative;
width: 150px;
border-radius:5px;
float:right;
font-family:Helvetica;
color:#FFF;
text-align:center;
line-height:55px;
}
#right:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
top: 100%;
left: 50%;
margin-left: -10px;
}
****
<div id="right">test</div>
https://jsfiddle.net/razia/peeq2aam/
Is it possible to make a button in CSS like the image below. I have tried in jsfiddle and I can get a solid shape but not one with a outline border?
jsfiddle code:
<div class="point-btn"></div>
.point-btn
{
width: 148px;
height: 34px;
background: #0a187e;
position: relative;
-moz-border-radius:3px 0 0 3px;
-webkit-border-radius:3px 0 0 3px;
border-radius:3px 0 0 3px;
margin-left:50px;
}
.point-btn:before
{
content:"";
position: absolute;
left: 100%;
width: 0;
height: 0;
border-top: 17px solid transparent;
border-left: 14px solid #0a187e;
border-bottom: 17px solid transparent;
}
Not too pretty- but you should get a decent starting point, simply use another pseudo element overlain on your existing triangle shape:
Demo Fiddle
.point-btn {
width: 148px;
height: 28px;
border: 2px solid #0a187e;
background: #fff;
position: relative;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
margin-left: 50px;
}
.point-btn:after {
content: "";
position: absolute;
left: 100%;
width: 0;
height: 0;
top: 0px;
border-top: 14px solid transparent;
border-left: 10px solid #fff;
border-bottom: 14px solid transparent;
}
.point-btn:before {
content: "";
position: absolute;
left: 100%;
width: 0;
top: -4px;
height: 0;
border-top: 18px solid transparent;
border-left: 14px solid #0a187e;
border-bottom: 17px solid transparent;
}
<div class="point-btn"></div>
Set a child element and overlay triangle as well.
You need to tweak up your markup a bit by adding span as a child element.
Demo
Here, what I did is, am cloning your triangle with different dimensions and overlay on your blue triangle, that will give your triangle a border effect, and next, I set absolute span element which is again positioned absolute to the parent element. If you want you can also use margin to set the element right and get rid of the /absolute position.
.point-btn {
width: 148px;
height: 34px;
background: #0a187e;
position: relative;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
margin-left: 50px;
}
.point-btn:before {
content: "";
position: absolute;
left: 148px;
width: 0;
height: 0;
border-top: 17px solid transparent;
border-left: 14px solid #0a187e;
border-bottom: 17px solid transparent;
}
.point-btn:after {
content: "";
position: absolute;
left: 147px;
width: 0;
height: 0;
top: 4px;
border-top: 13px solid transparent;
border-left: 10px solid #fff;
border-bottom: 13px solid transparent;
}
.point-btn span {
width: 142px;
background: #fff;
height: 25px;
position: absolute;
top: 4px;
left: 5px;
}
<div class="point-btn"><span></span>
</div>