CSS stick svg on the border right of a div

Question

I have the following snippet :

.container{
    margin-left: 6%;
    margin-right: 6%;
}

.wrapper{
    flex-grow: 1;
    border-left: 2px solid gray;
    border-right: 2px solid gray;
    border-bottom: 2px solid gray;
}

.svg_position{
    background: blue; 
    width: 150px; 
    height: auto; 
    position: absolute; 
    right: 0;
}

.row{
    display: flex;
}

.col {
    flex: 1;
    padding: 1em;
    display:flex;
    flex-direction:column;
}

div.box_header{
    background-color: gray;
    color: white;
    display: flex;
}

@media (max-width: 991px) {
    .row{
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .col{
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        margin-right: 0;
    }
}

<div class="container">
    <div class="row">
        <div class="col">
            <div class="box_header">
                <p>COL 1</p>
            </div>
            <div class="wrapper">
                <ul>
                    <li>TEXT</li>
                    <li>TEXT</li>
                    <li>TEXT</li>
                </ul>
            </div>
        </div>
        <div class="col">
            <div class="box_header">
                <p>COL 2</p>
            </div>
            <div class="wrapper">
                <ul>
                    <li>TEXT</li>
                    <li>TEXT</li>
                </ul>
            </div>
        </div>
        <div style="background: red;" class="col">
            <div class="box_header">
                <p>COL 3</p>
            </div>
            <div style="background: green" class="wrapper">
                <div class="svg_position">                 
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142.753 58.5">
                        <path d="M142.753,35l-49,23.5v-47Z" fill="#811818" />
                        <path d="M142.753,35H.065l23.59-17.476L0,0H142.753Z" fill="#b51c1c" />
                    </svg>
                </div>
                <ul>
                    <li>TEXT</li>
                    <li>TEXT</li>
                    <li>TEXT</li>
                    <li>TEXT</li>
                </ul>
            </div>
        </div>
    </div>
</div>

I'm trying to glue the svg into the right border whatever the size of the box is.

Expected result :

I'm pretty sure you can ditch the vendor prefixes: `-webkit-flex-direction`, `-ms-flex-direction`, `-webkit-flex`, `-ms-flex` etc. — Rounin, Feb 13 '20 at 12:51

Dmitry Sobolevsky · Answer 1 · 2020-02-13T13:02:18.217

2

Just add:

.wrapper {
   flex-grow: 1;
   border-left: 2px solid gray;
   border-right: 2px solid gray;
   border-bottom: 2px solid gray;
   position: relative;
}

.svg_position {
    width: 150px;
    height: auto;
    position: absolute;
    right: -35px;
};

edited Feb 13 '20 at 13:02

answered Feb 13 '20 at 12:51

Dmitry Sobolevsky

1,171
6
12

Just look at what it result -> https://jsfiddle.net/wvgxqhn0/2/ That is not the expected result – johannchopin Feb 13 '20 at 12:57
2

sorry, already replaced :) – Dmitry Sobolevsky Feb 13 '20 at 13:02

johannchopin · Accepted Answer · 2020-02-13T13:08:57.340

You were almost there. There was only the position: relative rule missing on the .wrapper element:

.container {
  margin-left: 6%;
  margin-right: 6%;
}

.wrapper {
  position: relative;
  flex-grow: 1;
  border-left: 2px solid gray;
  border-right: 2px solid gray;
  border-bottom: 2px solid gray;
}

.svg_position {
  background: blue;
  width: 150px;
  height: auto;
  position: absolute;
  right: -50px;     /* <-- Play with the right position to have the required effect */
  top: 0;
}

.row {
  display: flex;
}

.col {
  flex: 1;
  padding: 1em;
  display: flex;
  flex-direction: column;
}

div.box_header {
  background-color: gray;
  color: white;
  display: flex;
}

@media (max-width: 991px) {
  .row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .col {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 0;
  }
}

<div class="container">
  <div class="row">
    <div class="col">
      <div class="box_header">
        <p>COL 1</p>
      </div>
      <div class="wrapper">
        <ul>
          <li>TEXT</li>
          <li>TEXT</li>
          <li>TEXT</li>
        </ul>
      </div>
    </div>
    <div class="col">
      <div class="box_header">
        <p>COL 2</p>
      </div>
      <div class="wrapper">
        <ul>
          <li>TEXT</li>
          <li>TEXT</li>
        </ul>
      </div>
    </div>
    <div style="background: red;" class="col">
      <div class="box_header">
        <p>COL 3</p>
      </div>
      <div style="background: green" class="wrapper">
        <div class="svg_position">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142.753 58.5">
            <path d="M142.753,35l-49,23.5v-47Z" fill="#811818" />
            <path d="M142.753,35H.065l23.59-17.476L0,0H142.753Z" fill="#b51c1c" />
          </svg>
        </div>
        <ul>
          <li>TEXT</li>
          <li>TEXT</li>
          <li>TEXT</li>
          <li>TEXT</li>
        </ul>
      </div>
    </div>
  </div>
</div>

@executable If you take a look at his answer you will see that it's not the expected result -> https://jsfiddle.net/wvgxqhn0/2/ — johannchopin, Feb 13 '20 at 12:58

score 1 · Answer 3 · answered Feb 13 '20 at 12:54

Just replace the CSS that I have added.

In this, I just give the position: relative to the ".col" class and adjust the position of the SVG icon.

.container{
    margin-left: 6%;
    margin-right: 6%;
}

.wrapper{
    flex-grow: 1;
    border-left: 2px solid gray;
    border-right: 2px solid gray;
    border-bottom: 2px solid gray;
}

.svg_position{
    background: blue; 
    width: 150px; 
    height: auto; 
    position: absolute; 
    right: -34px;
    top: 66px;
}

.row{
    display: flex;
}

.col {
    flex: 1;
    padding: 1em;
    display:flex;
    flex-direction:column;
    postion: relative;
}

div.box_header{
    background-color: gray;
    color: white;
    display: flex;
}

@media (max-width: 991px) {
    .row{
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .col{
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        margin-right: 0;
    }
}

<div class="container">
    <div class="row">
        <div class="col">
            <div class="box_header">
                <p>COL 1</p>
            </div>
            <div class="wrapper">
                <ul>
                    <li>TEXT</li>
                    <li>TEXT</li>
                    <li>TEXT</li>
                </ul>
            </div>
        </div>
        <div class="col">
            <div class="box_header">
                <p>COL 2</p>
            </div>
            <div class="wrapper">
                <ul>
                    <li>TEXT</li>
                    <li>TEXT</li>
                </ul>
            </div>
        </div>
        <div style="background: red;" class="col">
            <div class="box_header">
                <p>COL 3</p>
            </div>
            <div style="background: green" class="wrapper">
                <div class="svg_position">                 
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142.753 58.5">
                        <path d="M142.753,35l-49,23.5v-47Z" fill="#811818" />
                        <path d="M142.753,35H.065l23.59-17.476L0,0H142.753Z" fill="#b51c1c" />
                    </svg>
                </div>
                <ul>
                    <li>TEXT</li>
                    <li>TEXT</li>
                    <li>TEXT</li>
                    <li>TEXT</li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS stick svg on the border right of a div

3 Answers3