[ANSWERED] html – How to create a self pointing arrow to a box

Question 1

You can give the second box a pseudo element and style it using clip-path to make a little arrow:

body {
    box-sizing: border-box;
    margin: 10px;
}

.wrapper {
    display: flex;
}

.container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
}

.container-2 {
    margin-top: 4em;
    height: 75px;
    width: 75px;
    border: 1px solid black;
    border-left-width: 0;
    position: relative;
}

.container-2::after {
  content: '';
  display: block;
  position: absolute;
  background-color: black;
  width: 10px;
  height: 10px;
  clip-path: polygon(100% 0, 80% 50%, 100% 100%, 0 50%);
  bottom: 0;
  left: 0;
  transform: translateY(50%);
}

<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>

Question 2

Perhaps this pseudo element ::after with a unicode arrow?

I additionally removed the left border

body {
  box-sizing: border-box;
  margin: 10px;
}

.wrapper {
  display: flex;
}

.container {
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.container-2 {
  margin-top: 4em;
  height: 75px;
  width: 75px;
  border: 1px solid black;
  border-left:0;
}

.container-2::after {
  content: "⮜";
  position: absolute;
  top: 140px;
}

<div class="wrapper">
  <div class="container"></div>
  <div class="container-2"></div>
</div>

Question 3

Removed left border
Added pseudo element::before, could also be div with class arrow
Created triangle arrow

body {
    box-sizing: border-box;
    margin: 10px;
}

.wrapper {
    display: flex;
}

.container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
}

.container-2 {
    margin-top: 4em;
    height: 75px;
    width: 75px;
    border: 1px solid black;
    border-left: none;
    position: relative;
}
.container-2:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-right: 8px solid black;
    border-bottom: 4px solid transparent;
    position: absolute;
    left: 0;
    bottom: -4px;
}

<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>

Question 4

I am little stuck and need ur help, actually I am stuck in a problem I need to create an self pointing arrow to a rectangular box in css which I am unable to develop it Any help with example would be appreciated.

To understand the problem better I am attaching the desired output image.

I am also sharing my code what I have tried

body {
    box-sizing: border-box;
    margin: 10px;
}

.wrapper {
    display: flex;
}

.container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
}

.container-2 {
    margin-top: 4em;
    height: 75px;
    width: 75px;
    border: 1px solid black;
}

<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>

Bollate

[ANSWERED] html – How to create a self pointing arrow to a box

By

Solution 1 :

Solution 2 :

Solution 3 :

Problem :

Comments

Comment posted by I did

Comment posted by Hao Wu

By

Related Post

[ANSWERED] python – Extract text from a class in HTML using CSS language

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate