This question already has answers here:
CSS triangle custom border color
(5 answers)
Closed 8 years ago.
Please any one help me how create below diagram using css.
________/\_______
| |
| |
| |
|________________|
Please help me how to it will done using css.and only div should be use.
See here: http://jsfiddle.net/alexwcoleman/6ue8vvba/
.box {
position: relative;
border: 1px solid #000;
height:100px;
width:300px;
margin-top:100px;
background:#fff;
}
.box:after, .box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #fff;
border-width: 30px;
margin-left: -30px;
}
.box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #000;
border-width: 31px;
margin-left: -31px;
}
This code use for create triangle:
HTML:
<div id="talkbubble"></div>
CSS:
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
margin-top: 50px;
}
#talkbubble:before {
content: "";
position: absolute;
right: 43%;
bottom: 100%;
width: 0;
height: 0;
border-left: 13px solid transparent;
border-bottom: 25px solid red;
border-right: 11px solid transparent;
}
SEE DEMO HERE:DEMO
Related
This question already has answers here:
CSS triangle custom border color
(5 answers)
Closed 6 years ago.
I am trying to add red borders to the triangle in the top left corner of the dropdown. But the problem is that the triangle itself is built as borders. So I've got no idea how to do that. Help me please.
.dropdown {
position: relative;
vertical-align: middle;
display: inline-block;
}
.dropdown-content {
position: absolute;
min-width: 160px;
background-color: yellow;
padding: 12px 16px;
margin-top: 20px;
z-index: 1;
border-color: red;
border-width: thin;
border-style: solid;
}
.dropdown-content a{
display: block;
}
.dropdown-content:after {
position: absolute;
left: 70%;
top: -20px;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid yellow;
}
<div class='dropdown'>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
You can add the triangle borders with another pseudo element.
.dropdown-content:before,
.dropdown-content:after {
position: absolute;
left: 70%;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom-width: 20px;
border-bottom-style: solid;
}
.dropdown-content:before {
top: -21px; /* extra -1 pixel offset at the top */
border-bottom-color: red;
}
.dropdown-content:after {
top: -20px;
border-bottom-color: yellow;
}
.dropdown {
position: relative;
vertical-align: middle;
display: inline-block;
}
.dropdown-content {
position: absolute;
min-width: 160px;
background-color: yellow;
padding: 12px 16px;
margin-top: 20px;
z-index: 1;
border-color: red;
border-width: thin;
border-style: solid;
}
.dropdown-content a {
display: block;
}
.dropdown-content:before,
.dropdown-content:after {
position: absolute;
left: 70%;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom-width: 20px;
border-bottom-style: solid;
}
.dropdown-content:before {
top: -21px; /* extra -1 pixel offset at the top */
border-bottom-color: red;
}
.dropdown-content:after {
top: -20px;
border-bottom-color: yellow;
}
<div class='dropdown'>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Try creating inner triangle which is smaller.
Check this answer: Adding border to CSS triangle
And this: CSS triangle custom border color
This question already has answers here:
Is it possible to style a div to be trapezoidal?
(2 answers)
Closed 6 years ago.
Is there any simple way using CSS to make this shape?
You can use rotateX() and perspective() to create shape like this.
.shape {
width: 250px;
height: 70px;
border: 2px solid black;
border-top: 1px solid black;
margin: 50px;
transform: perspective(10px) rotateX(-2deg);
}
<div class="shape"></div>
Yes it can be done. see the below code.
.shape {
width: 200px;
height: 100px;
background: #000;
margin: 20px 150px;
position: relative;
}
.shape:after {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 50px solid #000000;
border-bottom: 50px solid #fff;
border-left: 50px solid #000000;
border-right: 50px solid #fff;
position: absolute;
top: 0;
right: -99px;
}
.shape:before {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 50px solid #000000;
border-bottom: 50px solid #fff;
border-left: 50px solid #fff;
border-right: 50px solid #000000;
position: absolute;
top: 0;
left: -99px;
}
<div class="shape"></div>
This question already has answers here:
Aligning css arrow boxes
(6 answers)
Closed 8 years ago.
Hello i would like to style the borders of my list element so that the border-top-right and the border-bottom-right meet in a triangular shape with only css.
like so:
or like so:
I want to achieve both of these two shapes using css alone, to maybe alter the borders to that shape, i would like to know if that is possible and how i can go about it. The element in question is a list element.
If you're after that specific shape, you can use the :before and :after pseudo elements
Demo Fiddle (second shape)
HTML
<div></div>
CSS
div {
display:inline-block;
position:relative;
height:30px;
width:50px;
background:Red;
}
div:before, div:after {
content:'';
position:absolute;
display:inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 26.0px;
}
div:after {
border-color: transparent transparent transparent red;
right:-26px;
}
div:before {
border-color: transparent transparent transparent white;
}
code for your shapes:-
#breadcrumbs-two{
overflow: hidden;
width: 100%;
}
#breadcrumbs-two li{
float: left;
margin: 0 .5em 0 1em;
}
#breadcrumbs-two a{
background: #ddd;
padding: .7em 1em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
position: relative;
}
#breadcrumbs-two a:hover{
background: #99db76;
}
#breadcrumbs-two a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #ddd #ddd #ddd transparent;
left: -1em;
}
#breadcrumbs-two a:hover::before{
border-color: #99db76 #99db76 #99db76 transparent;
}
#breadcrumbs-two a::after{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid #ddd;
right: -1em;
}
#breadcrumbs-two a:hover::after{
border-left-color: #99db76;
}
#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-two .current::after,
#breadcrumbs-two .current::before{
content: normal;
}
DEMO
div {
background: #EF3E36;
margin: 10px;
}
.arrow1 {
position: relative;
left: 50px;
width: 250px; height: 100px;
}
.arrow1:before {
display: block;
content: "";
width: 0;
height: 0;
position: absolute;
left: -50px;
border: 50px solid #EF3E36;
border-left: 50px solid transparent;
border-right: 0;
}
.arrow1:after {
display: block;
content: "";
background: transparent;
width: 0;
height: 0;
position: absolute;
left: 250px;
border: 50px solid transparent;
border-left: 50px solid #EF3E36;
}
.arrow2 {
position: relative;
width: 300px; height: 100px;
}
.arrow2:after {
display: block;
content: "";
background: transparent;
width: 0;
height: 0;
position: absolute;
left: 300px;
border: 50px solid transparent;
border-left: 50px solid #EF3E36;
}
This question already has answers here:
How to create a transparent triangle with border using CSS?
(9 answers)
Closed 6 years ago.
I want create hollow triangle with CSS but I don't how to hollow that. I can create triangle with CSS but I have one problem and this is: I can't hollow this triangle.
This is my code:
HTML:
<div id="tringle"></div>
CSS:
#tringle {
position: absolute;
height: 0;
width: 0;
top: 50%;
left: 7px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid white;
}
Not exactly cross-browser but works. Hope I've understood your request.
http://jsfiddle.net/wmDNr/3/
.triangle {
position: relative;
width: 20px;
margin-top: 100px;
}
.triangle>div {
width: 20px;
height: 2px;
background: red;
margin-top: 100px;
}
.triangle>div:before {
content: " ";
display: block;
width: 20px;
height: 2px;
background: red;
-webkit-transform: rotate(56deg);
-moz-transform: rotate(56deg);
-ms-transform: rotate(56deg);
transform: rotate(56deg);
position: absolute;
top: -8px;
right: -5px;
}
.triangle>div:after {
content: " ";
display: block;
width: 20px;
height: 2px;
background: red;
-webkit-transform: rotate(-56deg);
-moz-transform: rotate(-56deg);
-ms-transform: rotate(-56deg);
transform: rotate(-56deg);
position: absolute;
top: -8px;
left: -5px;
}
I don't have solution but i have workaround with two triangle, FIDDLE
HTML CODE
<div id="tringle"></div>
<div id="tringle2"></div>
CSS CODE
#tringle {
left:10px;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid black;
}
#tringle2 {
left:10px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #FFF;
left: 57px;
position: absolute;
top: 38px;
}
Forking off rajesh kakawat - you can get the same effect with one div: http://jsfiddle.net/aDcTb/
<div id="triangle"></div>
#triangle {
left:10px;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid black;
}
#triangle:after {
left:10px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #FFF;
left: 57px;
position: absolute;
top: 38px;
content: '';
}
I would like to create this using only CSS. Is this possible? If so, can you guys help me out?
Fairly easy with borders and a pseudo element:
ALL
#button::after {
content: "";
border: 64px solid transparent;
border-top: 12px solid orange;
position: absolute;
top: 29px;
left: 0;
}
DEMO
Try to experiment with this basic button:
.btn {
width: 100px;
height: 30px;
text-align: center;
border: 0;
}
.btn-arrow {
position: relative;
background: coral;
}
.btn-arrow:after {
border: solid transparent;
content:"";
position: absolute;
border-top-color: coral;
border-width: 16px 50px;
left: 0px;
top: 100%;
margin-top: 0px;
}
http://jsfiddle.net/dfsq/tNjCb/1/
how about something like the following:
http://jsfiddle.net/WDCu3/
<div id="test">Testing</div>
<div id="arrow"></div>
#test {background-color:red; width:100px;}
div {text-align:center;}
#arrow {
border-top: 15px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width:0;
}