I tried to add an arrow shape to a div. i managed to add it to the end of the div but i am struggling to figure out how to add it to the front as well without using a new class. Is it possible to achieve it with only one class?
edit: my answer to the question with a different shape approach,
i think they are all 3 very useful:
.arrow {
margin-left: 100px;
position: relative;
background: pink;
width: 400px;
height: 100px;
text-align:center;
line-height:100px;
margin-bottom:10px;
}
.arrow:after {
border: solid transparent;
content: " ";
position: absolute;
border-bottom-color: white;
border-width: 50px;
left: 0;
top: 0;
transform: rotate(90deg);
}
.arrow:before {
border: solid transparent;
content: " ";
position: absolute;
border-bottom-color: pink;
border-width: 50px;
left: 400px;
top: 0;
transform: rotate(90deg);
}
<div class="arrow">
1
</div>
<div class="arrow">
2
</div>
You will need an inner element. What that element is, is purely up to you. Here I've used a <span> to make the left arrow appear.
.arrow {
float: left;
width: 128px;
height: 50px;
background-color: white;
border: 1px solid green;
position: relative;
margin-right: 40px;
text-align: center;
border-left: none;
}
.arrow:after,.arrow span:after {
content: '';
position: absolute;
top: 0px;
left: 128px;
width: 0;
height: 0;
border: 25px solid transparent;
border-left: 12px solid white;
z-index: 2;
}
.arrow:before,.arrow span:before {
content: '';
position: absolute;
top: 0px;
left: 129px;
width: 0;
height: 0;
border: 25px solid transparent;
border-left: 12px solid green;
z-index: 1;
}
.arrow span:after {
left: 0;
}
.arrow span:before {
left: 1px;
}
<div class="arrow"><span></span>1</div>
<div class="arrow"><span></span>2</div>
<div class="arrow"><span></span>3</div>
<div class="arrow"><span></span>4</div>
<div class="arrow"><span></span>5</div>
I have modified chevron shape, from this page: https://css-tricks.com/examples/ShapesOfCSS/ (borrowed idea, credits to mr Anthony Ticknor:))
.chevron {
position: relative;
text-align: center;
height: 60px;
width: 260px;
line-height:60px;
margin-bottom:10px;
}
.chevron:before {
content: '';
position: absolute;
top: 0;
left: 3%;
height: 50%;
width: 100%;
transform: skew(25deg, 0deg);
border:1px solid red;
border-bottom:none;
}
.chevron:after {
content: '';
position: absolute;
top: 50%;
left: 3%;
height: 50%;
width: 100%;
transform: skew(-25deg, 0deg);
border:1px solid red;
border-top:none;
}
<div class="chevron">1</div>
<div class="chevron">2</div>
So, one div, and two pseudo-elements, properly scewed, with borders hidden, where needed.
Related
I want to make a speech bubble shape identical to the image.
What part of the CSS shown below can be modified to make it look like the picture?
Can you help me to get the look I want?
.body{
background : linear-gradient(to bottom, #fff,red)
}
.chat {
position: relative;
width: 270px;
padding: 10px;
margin: 1em auto 50px;
text-align: center;
color: black;
background: #fff;
border: 1px solid gray;
border-radius: 30px;
}
.chat:before {
content: "";
position: absolute;
z-index: 2;
top: -2px;
left: -7px;
height: 20px;
border-left: 20px solid #E5E5EA;
border-bottom-right-radius: 16px 14px;
-webkit-transform: translate(0, -2px);
}
.chat:after {
content: "";
position: absolute;
z-index: 3;
top: -2px;
left: 4px;
width: 26px;
height: 20px;
background: white;
border-bottom-right-radius: 10px;
-webkit-transform: translate(-30px, -2px);
}
<div class="chat"></div>
We can't bring exactly as it is. I have tried to bring it near the shape.
.chat {
position:relative;
width:270px;
padding:10px;
height:50px;
margin:1em auto 50px;
text-align:center;
color:black;
background:#e5e5ea;
//border: 1px solid gray;
border-radius: 30px;
}
/* creates part of the curve */
.chat:before {
content: "";
position: absolute;
z-index: 2;
top: 7px;
left: -8px;
height: 20px;
border-left: 20px solid #E5E5EA;
border-bottom-right-radius: 16px 14px;
-webkit-transform: translate(0, -2px);
}
/* creates part of the curved pointy bit */
.chat:after {
content: "";
position: absolute;
z-index: 3;
top: 7px;
left: 4px;
width: 26px;
height: 20px;
background: white;
border-top-right-radius: 14px;
-webkit-transform: translate(-30px, -2px);
}
<div class="chat">
</div>
Here's a example based on Pure CSS speech bubbles by Nicolas Gallagher.
It uses overlapping pseudo-elements with border-radius to create the bubble's pointy curved stem. This may not be a pixel-perfect match to your mockup, but you can modify the values to improve the shape as desired.
body {
background: lightgray;
margin: 0;
}
.speech-bubble {
position: relative;
padding: 50px;
margin: 1em 20px;
text-align: center;
color: black;
background: white;
border-radius: 30px;
}
.speech-bubble:before {
content: "";
position: absolute;
z-index:-1;
left: -22px;
top: 0;
width: 40px;
border-bottom: 35px solid white;
border-top-right-radius: 25px;
}
.speech-bubble:after {
content: "";
position: absolute;
z-index:-1;
left: -28px;
top: -3px;
height: 38px;
width: 28px;
background: lightgray;
border-top-right-radius: 20px;
}
<div class="speech-bubble">Hello, world.</div>
This demo might help visualize how the stem is created:
body {
background: lightgray;
margin: 0;
}
.speech-bubble {
position: relative;
padding: 50px;
margin: 1em 20px;
text-align: center;
color: black;
background: white;
border-radius: 30px;
}
.speech-bubble:before {
content: "";
position: absolute;
z-index: -1;
left: -22px;
top: 0;
width: 40px;
border-bottom: 35px solid green;
border-top-right-radius: 25px;
}
.speech-bubble:after {
content: "";
position: absolute;
z-index: -1;
left: -28px;
top: -3px;
height: 38px;
width: 28px;
background: red;
border-top-right-radius: 20px;
}
<div class="speech-bubble">Hello, world.</div>
Also see:
How to create a curved speech bubble?
Speech bubble with arrow
This question already has answers here:
Text in Border CSS HTML
(10 answers)
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 3 years ago.
How to insert text with transparent background on border ?
used :before and :after pseudo classes.
body {
background-color: red;
}
.border {
height: 120px;
width: 400px;
border: 2px solid black;
position: relative;
margin: 40px
}
.border:before {
content: "My Header title";
width: 180px;
/* border: 1px solid; */
position: absolute;
text-align: center;
top: -10px;
background-color: red;
left: 50%;
transform: translateX(-50%);
}
.border:after {
content: "My Footer title";
width: 180px;
/* border: 1px solid; */
position: absolute;
text-align: center;
bottom: -10px;
background-color: red;
left: 50%;
transform: translateX(-50%);
}
<div class="border">
</div>
lets try this below code:
<div class="border">
<div class="border_box_left"></div>
<div class="border_box_right"></div>
</div>
<style>
.border {
height: 120px;
width: 400px;
position: relative;
margin: 40px
}
.border:before {
content: "My Header title";
width: 180px;
position: absolute;
text-align: center;
top: -10px;
left: 50%;
transform: translateX(-50%);
}
.border:after {
content: "My Footer title";
width: 180px;
position: absolute;
text-align: center;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}
.border_box_left {
position: absolute;
content: "";
width: 30%;
height: 100%;
left: 0px;
top: 0px;
border: 2px solid red;
border-right: none;
}
.border_box_right {
position: absolute;
content: "";
width: 30%;
height: 100%;
right: 0px;
top: 0px;
border: 2px solid red;
border-left: none;
}
</style>
Want to generate dynamic borders then calculate the content width using script and give width to border_box_left and border_box_right.
I need to create 1 div element and in it I need to draw 2 triangles as 1
1) it must be up arrow
2) it must be down arror
but I need add them in 1 class
I understand that I can create 2 classes and then with margin connect them but I need only one class
this is a problem.
can I do this?
If you were looking to make This for design (rather than being functional), you could use pseudo elements:
div {
position: relative;
margin: 50px;
height: 100px;
width: 100px;
transform: rotate(45deg);
}
div:before {
content: "";
height: 40%;
width: 40%;
top: 0;
left: 0;
position: absolute;
border-top: 5px solid black;
border-left: 5px solid black;
transition: all 0.6s;
}
div:after {
content: "";
height: 40%;
width: 40%;
bottom: 0;
right: 0;
position: absolute;
border-bottom: 5px solid black;
border-right: 5px solid black;
transition: all 0.6s;
}
div:hover:before,
div:hover:after {
border-color: tomato;
}
<div></div>
If, however, you need this to be actually functional (i.e. to register if you need it to be 'pressable' - then you would need to use multiple elements since pseudo elements aren't distinguishable in the DOM for 'key pressing'):
div {
margin: 50px;
height: 100px;
width: 100px;
position: relative;
}
div .up {
position: absolute;
top: 0;
left: 50%;
height: 50%;
width: 50%;
transform-origin: top left;
transform: rotate(45deg);
border-left: 5px solid tomato;
border-top: 5px solid tomato;
transition: all 0.6s;
}
div .down {
position: absolute;
top: 45%;
left: -5%;
height: 50%;
width: 50%;
transform-origin: bottom right;
transform: rotate(45deg);
border-bottom: 5px solid tomato;
border-right: 5px solid tomato;
transition: all 0.6s;
}
div span:hover {
border-color: black;
}
<div>
<span class="up"></span>
<span class="down"></span>
</div>
You can create a square div and just rotate it 45 degrees using CSS transform. You can view a live demo of it at JSFiddle
<div class="diamond"></div>
<style>
.diamond {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
}
</style>
I am a beginner and I am trying to create something like this
But I am having trouble getting the lines to stack on top of each other to the left of the text.
Can someone help nudge me in the right direction here?
#topbar {
width: 15%;
background-color: #000000;
height: 3px;
float: left;
}
#bottombar {
width: 15%;
background-color: #000000;
height: 1px;
float: none;
clear: both;
}
#LocationText {
float: left;
font-size: 50px;
}
<div id="topbar"></div>
<div id="LocationText">Location</div>
<div id="bottombar"></div>
here is my http://jsfiddle.net/y0sv7shs/
Use ::before and ::after :pseudo-elements.
span {
position: relative;
margin-left: 100px;
font-size: 50px;
}
span::before, span::after {
position: absolute;
content: '';
width: 50%;
height: 100%;
border-top: 1px solid black;
border-bottom: 1px solid black;
right: -50%;
top: 0;
}
span::before {
left: -50%;
}
<span>Location</span>
Or you could do something like this:
span {
position: relative;
margin-left: 100px;
font-size: 50px;
}
span::before, span::after {
position: absolute;
content: '';
width: 50%;
height: 25%;
border-top: 2px solid black;
border-bottom: 1px solid black;
right: -50%;
top: 37.5%;
}
span::before {
left: -50%;
}
<span>Location</span>
The one that you requested.
span {
position: relative;
font-family: 'Bree Serif', serif;
margin-left: 100px;
font-size: 50px;
color: #A0001F;
font-weight: bold;
}
span::before, span::after {
position: absolute;
content: '';
width: 100%;
height: 15%;
border-top: 2px solid #A0001F;
border-bottom: 2px solid #A0001F;
right: -100%;
top: 42.5%;
}
span::before {
left: -45%;
width: 45%;
}
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<span>CONTACT</span>
In addition to chipChocolate's answer, you may also contain the elements so as to force them to reside above one another in a particular location relative to the text (However, this would take more elements, and isn't as clean):
<div class="locationcontainer">
<div id="topbar"></div>
<div id="bottombar"></div>
</div>
<div id="LocationText">Location</div>
#topbar {
width: 100%;
background-color: #000000;
height: 2px;
}
#bottombar {
width:90%;
background-color: #000000;
height: 2px;
margin-top: 10px;
float:right;
}
.locationcontainer
{
float:left;
width:15%;
margin-right:5px;
}
#LocationText {
float: left;
}
http://jsfiddle.net/fstqdxeu/
I'm wondering if this shape can be done in css3 with as little html as possible:
So far, I've managed to do this:
.wrapper {
position: relative;
}
.box {
width: 100px;
height: 100px;
border: 1px solid #000;
position: absolute;
top: 100px;
left: 100px;
}
.box:before {
content: "";
border: 1px solid #000;
border-bottom: 1px solid #fff;
width: 50%;
height: 10px;
position: absolute;
top: -12px;
left: -1px;
}
.box:after {
content: "";
border: 1px solid #000;
border-top: 1px solid #fff;
width: 50%;
height: 10px;
position: absolute;
bottom: -12px;
right: -1px;
}
<div class="wrapper">
<div class="box"></div>
</div>
The fiddle is here, but I don't know how to skew it like that so that I have right angled trapezoid on top and bottom.
The shape needs no extra elements
The shape can be created with just the <div>:
The left side is created with the divs left, top and bottom borders.
The right side is made by :before and its top, right and bottom borders
The spans joining the two boxes are created with the :after thanks to skewY
Note the browser support of the transform property. IE 9 requires the -ms- prefix, and Safari and the Android browser require -webkit-.
Working Example - just the shape
The CSS has been condensed and the border style of the pseudo elements is inherited from the div itself.
div {
border: solid 4px #000;
border-right-width: 0;
width: 100px;
height: 200px;
position: relative;
}
div:before,div:after {
content: '';
display: block;
height: 100%;
width: 100%;
border: inherit;
border-right-width: 4px;
border-left: none;
position: absolute;
left: 100%;
top: 13px;
margin-left: 20px;
}
div:after {
width: 20px;
border-right: none;
top: 5px;
transform: skewY(40deg);
margin: 0;
}
<div></div>
Working example - with text
With the example above, the contents will not be contained inside the entire shape. Rather, it will be constrained inside the divs half width. The contents needs to be wrapped in a <span> with 200% width to punch it outside of the divs constraints.
div {
border: solid 4px #000;
border-right-width: 0;
width: 100px;
height: 200px;
position: relative;
}
div:before,div:after {
content: '';
display: block;
height: 100%;
width: 100%;
border: inherit;
border-right-width: 4px;
border-left: none;
position: absolute;
left: 100%;
top: 13px;
margin-left: 20px;
}
div:after {
width: 20px;
border-right: none;
top: 5px;
transform: skewY(40deg);
margin: 0;
}
span {
width: 200%;
display: block;
padding: 20px 10px 10px;
}
<div><span>This is me writing a large amount of words into the div. I think that you may want a span in order to contain them.</span></div>
Using two different elements:
1) Separate the shape in two different rectangular
2)After use pseudo-elements after and before to create the connection line.
My approach:
.wrapper {
position: relative;
}
.box {
width: 50px;
height: 100px;
border: 4px solid #000;
position: absolute;
top: 100px;
left: 100px;
border-right: 0;
}
.box2 {
width: 50px;
height: 100px;
border: 4px solid #000;
position: absolute;
top: 112px;
left: 164px;
border-left: 0;
}
.box:after {
content: "";
position: absolute;
width: 15px;
border: 2px solid #000;
right: -15px;
top: 2px;
transform: rotate(45deg);
}
.box:before {
content: "";
position: absolute;
width: 15px;
border: 2px solid #000;
right: -15px;
bottom: -10px;
transform: rotate(45deg);
}
<div class="box"></div>
<div class="box2"></div>
I've used four divs: .left, .right, .middle-top and .middle-bottom; and skewed .middle-top and .middle-bottom to add those connection lines.
.left {
width: 40px;
height: 100px;
border: 3px solid black;
border-right: 1px solid white;
position: absolute;
top: 50px;
left: 100px;
}
.right {
width: 40px;
height: 100px;
border: 3px solid #000;
border-left: 1px solid white;
position: absolute;
top: 60px;
left: 160px;
}
.middle-top {
width: 20px;
height: 20px;
border-top: 3px solid black;
position: absolute;
transform: matrix(1, 0.5, -0.5, 1, 0, 0);
top: 55px;
left: 137px;
z-index: 9;
}
.middle-bottom {
width: 21px;
height: 20px;
border-top: 3px solid black;
position: absolute;
transform: matrix(1, 0.5, -0.5, 1, 0, 0);
top: 158px;
left: 135px;
z-index: 9;
}
<div class="left"></div>
<div class="middle-top"></div>
<div class="middle-bottom"></div>
<div class="right"></div>