HTML Line with a Downward Arrow

HTML line with a downward arrow

You can use pseudo-elements :after and :before:

.line {    width:70%;}.line:after {    content:'';    position: absolute;    border-style: solid;    border-width: 7px 7px 0;    border-color: #FFFFFF transparent;    display: block;    width: 0;    z-index: 1;    top: 8px;    left: 45%;}.line:before {    content:'';    position: absolute;    border-style: solid;    border-width: 7px 7px 0;    border-color: #7F7F7F transparent;    display: block;    width: 0;    z-index: 1;    top: 9px;    left: 45%;}

<hr class="line">

hr line with a arrow in between pointing down

You can modify to this:

div.hr {    width:70%;    height: 1px;    background: #7F7F7F;}div.hr:after {    content:'';    position: absolute;    border-style: solid;    border-width: 15px 15px 0;    border-color: #FFFFFF transparent;    display: block;    width: 0;    z-index: 1;    top: 8px;    left: 35%;}div.hr:before {    content:'';    position: absolute;    border-style: solid;    border-width: 15px 15px 0;    border-color: #7F7F7F transparent;    display: block;    width: 0;    z-index: 1;    top: 9px;    left: 35%;}

<div class="hr"></div>

How to make an up and down arrow

To make the up-down arrows with the line in between the same as your example, I would suggest using SVG. You can use it inline as shown in the following example :

.wrap{position:relative;  height:70vh;  border-left:1px solid #000;  margin:10vh 50px;  padding:5vh 20px;}.arrow {  position:absolute;  left:-5px;  width: 9px;  height: auto;}.up{top:-9px;}.down{bottom:-9px;}

<div class="wrap">  <svg class="arrow up" viewbox="0 0 7 10">    <path d="M3.5 0 L7 10 Q3.5 7 0 10z"/>  </svg>  <svg class="arrow down" viewbox="0 0 7 10">    <path d="M3.5 10 L7 0 Q3.5 3 0 0z"/>  </svg>  Whatever content you need here</div>

how to make text and arrow on same line. Text center and arrow on far left/right side

Well first, you have two class definitions for .down that have the same instructions, so get rid of one of them.

Next, you need to alter your layout to accomplish the alignment. There are a number of ways to do this: float, flexbox, absolute positioning.

Here's a low-tech way that uses two div elements with the second one set to be absolutely positioned with its right edge on the right of the parent container.

.down {      transform: rotate(45deg);      -webkit-transform: rotate(45deg);}
.wrapper {position:absolute; width:100%;}
div.middle { text-align:center; }div.right { position:absolute; text-align:right; top:0px; right:1em; font-size:2em; }

<br><div class="wrapper">  <div class="middle">Down arrow: </div>  <div class="right"><i class="arrow down">→</i></div></div>

How can I implement downward arrow on a div?

I believe Juanin means to move the "Open" & "Heart" contents to elements.
Which in turn will free up the pseudo before & after for the downarrows.

Here is a rough fiddle to show what he means.

https://jsfiddle.net/wd0um6q9/2/

and the HTML Markup:

  <div style="height: 200px;margin-top: 30px;">
    <div class="home-price home-hot"><i class="open">Open</i><i class="heart"></i>$899K</div>
  </div>

And the CSS:

/* Open House Marker */
    .open {
      border-width: 1px;
      border-style: solid;
      border-color: white;
      border-radius: 2px;
      border-spacing: 1px;
      color: white;
      background-color: #586371;
      font-family: Helvetica, Arial;
      font-size: 8px;
      font-weight: 300;
      display: block;
      position: absolute;
      top: -10px;
      left: -1px;
      text-align: center;
      width: 25px;
    }

    /* Favorite Marker */
    .heart:before {
      content: "♥";
      color: red;
      display: block;
      position: absolute;
      left: 46px;     
      top: -8px;
      text-shadow:  white 0px 0px 1px,   
                    white 0px 0px 1px,   
                    white 0px 0px 1px,
                    white 0px 0px 1px,   
                    white 0px 0px 1px,   
                    white 0px 0px 1px;

    }

Is there an html special character for a down-right arrow?

You want Unicode codepoint U+21B3 ↳

You should be able to type

↳

in the document. But be aware that not all your users may have the glyph for this character on their computer.

How to make an arrow pointing down after a section in HTML/CSS

I just did the thing with margins and I attached it to the bottom with bottom: 0

.down-btn  {
bottom: 0;
position: absolute;
min-width: 30px;
margin: 0px calc(50vw - 15px);
}

how to create arrow down/up in css

My proposal is:

.triangle_down {  width: 0;  height: 0;  border-left: 15px solid transparent;  border-right: 15px solid transparent;  border-top: 15px solid #2f2f2f;  font-size: 0;  line-height: 0;  float: left;}.triangle_down1 {  position: relative;  top: -5px;  content: "";  display: inline-block;  width: 15px;  height: 15px;  border-right: 0.2em solid black;  border-top: 0.2em solid black;  transform: rotate(135deg);  margin-right: 0.5em;  margin-left: 1.0em;} .triangle_up1 {   position: relative;   top: -5px;   content: "";   display: inline-block;   width: 15px;   height: 15px;   border-right: 0.2em solid black;   border-top: 0.2em solid black;   transform: rotate(-45deg);   margin-right: 0.5em;   margin-left: 1.0em; }

<div id="dialog1" class="triangle_down"></div><div id="dialog2" class="triangle_down1"></div><div id="dialog3" class="triangle_up1"></div>

HTML Line with a Downward Arrow