Cornwell February 2016

Border on custom shape

Fiddle here

I'm trying to set the border color of some irregular shapes (arrowish) I did. The problem is that to achieve those shapes I had to manipulate the borders already so I can't just do border-color: red;

I want to set the color of the borders of each shape 2px

HTML:

<div class="menuTop">
<ul>
  <li><div><a href="#">HOME</a></div></li>
  <li><div><a href="#">Location</a></div></li>
  <li><div><span>Sub-Location<span></div></li>  
</ul>
</div>

CSS:

.menuTop {
    background-color: lightgreen;
    height: 80px;
  margin: auto;
  position: absolute;
  top: 0;
  width: 100%
}
.menuTop ul {
  list-style-type: none;

}
.menuTop li {
  font-size: 0;
  display: inline-block;
}
.menuTop li:before,
.menuTop li:after {
    content:'';
    display: inline-block;
    width:0;
    height:0;

    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    vertical-align: middle;
}
.menuTop li:before {
    border-top-color: #fff;
    border-bottom-color: #fff;
    border-right-color: #fff;
}
.menuTop li:first-of-type:before {
  border:0;
}
.menuTop li:first-of-type {
  border-left: 2px solid #dfdfdf;
}
.menuTop li:after {
    border-left-color: #fff;
}
.menuTop li:last-of-type:after {
    border:0;
}

.menuTop li:last-of-type {
  border-right: 2px solid #F37C31;
  border-bottom: 2px solid #F37C31;
  border-top: 2px solid #F37C31;
}

.menuTop li div {
    width: 185px;
    height:40px;
    display: inline-block;
    background: #fff;
    text-align:center;
    position: relative;
    line-height:40px;
    vertical-align: middle;  
}

.menuTop li div a, span {
  text-d        

Answers


Persijn February 2016

Css solution with rectangles

Here is an example that does not use trinalges, but instead uses rotated rectangel.

Explination:
First the before and after create a rotated rectangle.
Give the before rectangle the same color as the background.
After element gets the same color as the arrow. Then we can apply borders to rectangles to give the perfect illusion of the elements having the border.

body {
  background-color: #555;
}
.menu {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.menu .arrow {
  position: relative;
  display: inline-block;
  list-style: none;
  font-size: 2em;
  width: 150px;
  height: 70px;
  background-color: white;
  margin-right: 90px;
  border-top: 2px solid red;
  border-bottom: 2px solid red;
}
.arrow:first-of-type {
  border-left: 2px solid red;
}
.arrow::after {
  position: absolute;
  top: 9px;
  right: -25px;
  content: "";
  height: 50px;
  width: 50px;
  background-color: white;
  transform: rotate(45deg);
  border-right: 2px solid red;
  border-top: 2px solid red;
}
.arrow::before {
  content: "";
  position: absolute;
  top: 9px;
  left: -25px;
  height: 50px;
  width: 50px;
  background-color: #555; /*Needs to match body backgrond-color*/
  transform: rotate(45deg);
  border-right: 2px solid red;
  border-top: 2px solid red;
}
.arrow:first-of-type::before {
  content: none;
  
}
.arrow span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<ul class="menu">
  <li class="arrow"><span>Text</span>
  </li>
  <li class="arrow"><span>Text</span>
  </li>
  <li class="arrow"><span>Text</span>
  </ 

Post Status

Asked in February 2016
Viewed 2,071 times
Voted 11
Answered 1 times

Search




Leave an answer