CODEWITHSUNDEEP
htmlcssborder
Dan
Dan

Reputation: 2344

CSS angled right border on a div

I'm trying to create a menu that consists of 3 or 4 DIVS that have a right border that is angled, like the hastily put together image below.

enter image description here

The HTML would look like:

<div class="youarehere">
        <div class="yah_1">You are here</div>
        <div class="yah_1">xxx</div>
        <div class="yah_1">yyy/div>
        <div class="yah_2">sss</div>
    </div>

yah_1 would have the right angled border and yah_2 would just be borderless.

Border-radius obviously gives me the curved effect, but I want angled. I've looked at numerous CSS examples online but none give me this effect.

Upvotes: 2

Views: 5009

Answers (4)

Rajesh T
Rajesh T

Reputation: 19

https://codepen.io/UI-UXDeveloper/pen/jYBRLp

    </style>
  .youarehere .item {
  display:inline-block;
  border:2px solid #333;
  border-width:2px 0px;background-color:transparent;
  margin:0px 0px 0px 0px;padding:5px 12px 5px 23px;float:left;cursor:pointer;
  position:relative;
}
.youarehere .item:hover{background-color:#ccc;}
.youarehere .item:first-child{border-left:2px solid #000;padding-left:12px;}
.youarehere .item .rightTriangle{
 position: absolute;
    right: -11px;
    top: -1px;
    width: 0;
    height: 0;
    border-left: 12px solid #ffffff;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    z-index: 9;
}
.youarehere .item:hover .rightTriangle{border-left: 12px solid #ccc;}
.youarehere .item:after{
      content: "";
    position: absolute;
    right: -15px;
    top: -2px;
    width: 0;
    height: 0;
    border-left: 15px solid #000;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
}
</style>


  <div class="youarehere">
    <div class="yah_1 item">You are here<div class="rightTriangle"></div></div>
      <div class="yah_1 item">xxx<div class="rightTriangle"></div></div>
      <div class="yah_1 item">yyy<div class="rightTriangle"></div></div>
      <div class="yah_2 item">sss<div class="rightTriangle"></div></div>
  </div>

https://codepen.io/UI-UXDeveloper/pen/jYBRLp

Upvotes: -1

fen1x
fen1x

Reputation: 5860

Use :before and :after pseudo-elements in combination with border and border-left to create slanted links:

*,
*:before,
*:after {
  box-sizing: border-box;
}

.nav {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  padding: 0;
  border: 3px solid #33691e;
}

.nav-li {
  background: #aed581;
  padding: .5rem 1rem .5rem 2rem;
  position: relative;
  transition: all .2s;
}

.nav-li:hover {
  background: #8bc34a;
}

.nav-li:hover::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  display: inline-block;
  border: 17px solid transparent;
  border-left: 10px solid #8bc34a;
  border-right: 0;
  margin-right: -10px;
}

.nav-li:first-child {
  padding: .5rem 1rem;
}

.nav-li:not(:last-child) {
  margin-right: 10px;
}

.nav-li:after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  display: inline-block;
  border: 17px solid transparent;
  border-left: 10px solid #aed581;
  border-right: 0;
  margin-right: -10px;
  transition: all .2s;
}

.nav-li:not(:first-child):before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: inline-block;
  border: 17px solid transparent;
  border-left: 10px solid white;
  border-right: 0;
}
<ul class="nav">
  <li class="nav-li">Link 1</li>
  <li class="nav-li">Link 2</li>
  <li class="nav-li">Link 3</li>
  <li class="nav-li">Link 4</li>
</ul>

Upvotes: 1

Patrick Mlr
Patrick Mlr

Reputation: 2965

Try to use pseudo-elements. Like :after. CSS Pseudo-elements

Short explanation:

I've created an :after-element and rotated it with a border right and top. After this, I created some css to style it.

.youarehere>.yah_1,
.youarehere>.yah_2 {
  display: inline;
  border: 1px solid black;
  position: relative;
  padding-right: 10px;
  padding-left: 5px;
  margin-left: -4px;
  border-left: none;
  border-right: none;
}

.youarehere>.yah_1::after {
  content: " ";
  border-right: 1px solid black;
  border-top: 1px solid black;
  transform: rotate(45deg);
  position: absolute;
  right: 0px;
  top: 3px;
  height: 13px;
  width: 13px;
}

.youarehere>.yah_1:first-child {
  border-left: 1px solid black;
}

.youarehere>.yah_2 {
  border-right: 1px solid black;
}
<div class="youarehere">
  <div class="yah_1">You are here</div>
  <div class="yah_1">xxx</div>
  <div class="yah_1">yyy</div>
  <div class="yah_2">sss</div>
</div>

Upvotes: 1

Haroon R.
Haroon R.

Reputation: 302

The general process is:

  1. Create a pseudo-element you can make use of. This will mean using either a :before or :after selector in your CSS (e.g. .yah_1:after { /* style element here... */ } ).

  2. Style the pseudo-element by giving it some false (hidden) content, no size, and three margins. This will turn it into a triangle. Read more in this article and try adjusting the values to see how it works.

  3. Place the triangle to the right of the element it is part of. One way to do this could be by setting .yah_1 { position: relative; } and then using position: absolute; on your pseudo-element, along with top/left/bottom/right properties, to position it.

  4. You don't need a different class on the last item to remove the triangle from that one. Just override your styles using .yah_1:last-child:after { display: none; }. That will leave the triangle present on all but the last element.

Upvotes: 0

Related Questions