I was looking at css-tricks to see how to make a triangle with css. In the comments there was a question about how to give the triangle a border.
I thought I had a solution, but the results were unexpected. How come the right half of the inner triangle is missing.
#outer {
display: block;
height: 0;
width: 0;
border-top: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
#inner {
display: inline;
margin: 0;
position: relative;
left: -40px;
top: -6px;
height: 0;
width: 0;
border-top: 40px solid green;
border-bottom: 0 solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
<div id="outer">
<div id="inner"></div>
</div>
If I change the inner triangle to have display: block or display: inline-block, the right half exists, but it's gone when then inner triangle has display: inline and I don't know why.
Strange, it works on Firefox and IE.
You can make it work on Chrome with
#inner::after {
content: '\200B';
}
#outer {
display: block;
height: 0;
width: 0;
border-top: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
#inner {
display: inline;
margin: 0;
position: relative;
left: -40px;
top: -6px;
height: 0;
width: 0;
border-top: 40px solid green;
border-bottom: 0 solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
#inner::after {
content: '\200B';
}
<div id="outer">
<div id="inner"> </div>
</div>
Related
I would like to create a navbar that looks like this: https://www.audacityteam.org/
I tried this but I think this doesn't look right. The border from the notch is on top of the left and right placeholders when it shouldn't be. Also I think I made this too complicated; can this be done with fewer div elements?
:root {
--background: black;
--accent: silver;
}
body {
margin: 0;
}
.placeholder {
float: left;
height: 20px;
width: 30%;
background: var(--background);
border-bottom: 3px solid var(--accent);
}
.right {
float: right;
}
.container {
position: absolute;
left: 25%;
border-top: 50px solid var(--background);
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 40%;
}
.container-accent {
position: absolute;
left: 24.8%;
border-top: 53px solid var(--accent);
border-left: 53px solid transparent;
border-right: 53px solid transparent;
height: 0;
width: 40%;
transform: scale(1.008, 1.008);
}
<div class="placeholder"></div>
<div class="placeholder right"></div>
<div class="container-accent"></div>
<div class="container"></div>
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>
How to create border triangle?
The only thing I can think of to make this is to make a triangle
.triangle {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 20px solid #8e8e8e;
}
But this is a solid triangle, is there a way to make it look like the triangle extends the border
Create an :after or :before element that absolutely positions at the bottom of your div.
.box {
position: relative;
background-color: #F00;
border: 1px solid #000;
width: 50px;
height: 50px;
}
.box:after {
content: "";
width: 16px;
height: 16px;
position: absolute;
background-color: #FFF;
bottom: -8px; /* half of the elements width/height */
left: 50%;
transform: translateX(-50%) rotate(45deg);
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}
<div class="box">
I've made the :after element white so you can see what's happening inside of it.
You need to move triangle element to under sub layout.
I added more triangle for the border design.
.balon {
width: 350px;
height: 120px;
border: 5px solid #2C6DBF;
margin: 50px auto;
position: relative;
border-radius: 8px;
}
.balon::after, .balon::before {
width: 0;
height: 0;
content: '';
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 21px solid #fff;
position: absolute;
bottom: -19px;
right: 0;
left: 0;
margin: auto;
}
.balon::before {
border-left-width: 20px;
border-right-width: 20px;
border-top-width: 25px;
border-top-color: #2C6DBF;
bottom: -25px;
}
<div class="balon">
</div>
This question already has answers here:
Border within border CSS
(3 answers)
Closed 6 years ago.
In my project i need to draw rectangle with right arrow and it should be filled with white color background with black color border. I have tried in many ways but i didn't get right arrow with white background and black color border.
I tried follwoing code:
HTML:
<html>
<head></head>
<body>
<div class="paddingstyleleft right-arrow1">
<div><span><img src="images/referral_out.png"/> Referred To<span>
<div><strong>Dr.Sarah Willam</strong><span class="bandagealign"><span class="bandage">3</span></span></div>
<div class="datestyle"><img src="images/Date.png"/> Jul 24th,2016 | <div class="datestyle1 scheduledstatus"><span class="spanwaiting">Scheduled</span></div></div></div>
</div>
</body>
</html>
CSS:
.right-arrow1 {
display: inline-block;
position: relative;
background: white;
padding: 15px;
height: 100px;
padding:25px;
border-bottom: 1px solid grey;
width: 285px;
border: 1px solid black;
}
.right-arrow1:after {
content: '';
display: block;
position: absolute;
left: 100%;
top: 50%;
margin-top: -10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid black;
}
you can check this fiddle for all arrows:
https://jsfiddle.net/wLxag8pn/
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid blue;
}
Try this css for arrow with border fiddle link https://jsfiddle.net/m4dv4f7s/
div{
position: relative;
background-color: #008000;
padding: 0px 16px;
height: 40px;
line-height: 40px;
display: inline-block;
color: white;
border: 2px solid black;
border-right: none;
z-index:1;
}
div:before{
content: '';
position: absolute;
left: 100%;
z-index:-1;
width: 28px;
height: 28px;
background-color: #008000;
border-right: 2px solid black;
border-bottom: 2px solid black;
transform: rotate(-45deg) translate(-14px,-7px);
}
I have the following CSS and HTML to make a 'triangle' div:
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
<div class="arrow-right">
<p>next</p>
</div>
The problem is I want to have text (one word) inside the div (center of the triangle) but it breaks the triangle and put beside it.
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
position:relative;
}
.arrow-right p{
position: absolute;
top: -24px;
left: -50px;
}
<div class="arrow-right">
<p>next</p>
</div>
Do you want this output?
You can put only this css in p tag:
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-right p {
left: 20px;
position: absolute;
top: 40px;
}
<div class="arrow-right">
<p>next</p>
</div>
The simplest way to achieve this is by positioning the element relative to its original position
.arrow-right {
position: relative;
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-right p{
position: relative;
left: -50px;
top: -25px;
}
<div class="arrow-right">
<p>next</p>
</div>
Try with this below code...
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-right p{
position: absolute;
left: 15px;
top: 40px;
}
<div class="arrow-right">
<p> next </p>
</div>
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-right p {
position: relative;
left: -48px;
top: -26px;
}
<div class="arrow-right">
<p>next</p>
</div>
Otherwise you can do like this. Add position:relative css rule to .arrow-right then write css rules for '.arrow-right p' as position:absolute;left: 15px;top: 40px;