CSS Trapezoid Button With Solid Border

Question

Is it possible to create a trapezoidal button like in the pic above? I searched the web but couldn't find any solution that shows the border.

Edit: Seems my question wasn't clear or just wasn't understood enough. Anyway, the other threads just show how to create a trapezoid by joining 2 elements, but how do I add border on that?

Duplicate: https://stackoverflow.com/questions/7920754/how-to-draw-a-trapezium-trapezoid-with-css3 (I voted wrongly, can't change vote now. But this should still be closed.) — Bram Vanroy, Oct 02 '17 at 10:10
Possible duplicate of [How to draw a trapezium/trapezoid with css3?](https://stackoverflow.com/questions/7920754/how-to-draw-a-trapezium-trapezoid-with-css3) — agrm, Oct 02 '17 at 10:24
Thank you for all the answers, but as you can see in the pic, the trapezoid buttons has a grayish border and that's what i want to achieve. The other threads just show how to create a trapezoid by joining 2 elements, but how do I add border on that? — Cons7an7ine, Oct 03 '17 at 01:07

score 2 · Answer 1 · answered Oct 02 '17 at 09:54

.trapezoid {
  width: 230px;
  text-align: center;
  height: 0; 
  position: relative;
  border-right: 50px solid transparent;
  border-top: 40px solid #2963BD;
  border-left: 50px solid transparent;
  box-sizing: content-box;
}
.trapezoid span { 
  position: absolute;
  top: -30px;
  left: 25%;
  color: #fff;
}

<div class="trapezoid"><span>Trapezoid Button</span></div>

makoi07 · Accepted Answer · 2017-10-03T02:53:56.380

Try the following code:

OPTION 1: PURE CSS

The logic of this approach is to add a thick border-bottom and a thick transparent border-right to achieve a tab effect;

PROS: very minimal styling and very easy to understand.
CONS: very limited in terms of customisation (i.e. can't add border to the tab)

.tabs {
  display: flex;
  flex-direction: row;
}

.tab {
    height: 0;
    width: 120px;
    border-bottom: 50px solid #CCCCCC;
    border-right: 20px solid transparent;
    border-top-left-radius: 5px;
    box-sizing: border-box;
    display: block;
}

.tab:not(:first-child) {
    margin-left: -10px;
    z-index: 0;
}

.tab .label{
  padding: 15px;
  text-align: center;
  color: #444444;
}

.active {
  border-bottom: 50px solid #444444;
  z-index: 10;
}
.active .label{
  color: #ffffff;
}

<div class="tabs">
<div class="tab active"><div class="label">TAB 1</div></div>
<div class="tab"><div class="label">TAB 2</div></div>
<div class="tab"><div class="label">TAB 3</div></div>
</div>

OPTION 2: USE SVG AS TAB BACKGROUND

The logic of this approach is to use two separate vector images (svg) as inline background image:

PROS: very customisable; can add border to tab, can add gradient background to tab.
CONS: requires basic knowledge on svg.

.tabs {
  display: flex;
  flex-direction: row;
  overflow: visible;
  padding-left: 15px;
}

.tab {
    height: 0;
    width: 130px;
    height: 38px;
    margin-left: -15px;
    z-index: -1;
    cursor: pointer;
    background-size: contain;
    background: transparent url("data:image/svg+xml;utf8,<svg   xmlns='http://www.w3.org/2000/svg' width=\"121px\" height=\"38px\" viewBox=\"0 0 121 38\"><path d=\"M0.786477689,37.3880765 L0.786477689,5 L0.786477689,5 C0.786477689,2.790861 2.57733869,1 4.78647769,1 L102.838012,1 L102.838012,1 C104.471746,1 105.941285,1.99354246 106.549997,3.50964209 L120.152151,37.3880765 L0.786477689,37.3880765 Z\" stroke=\"#979797\" fill=\"#F0F0F0\"></path></svg>") no-repeat;
}

.tab .label{
  box-sizing: border-box;
  padding: 12px;
  text-align: center;
  color: #444444;
  font: 13px arial, sans-serif;
  width: 90%;
}

.active {
  background: transparent url("data:image/svg+xml;utf8,<svg   xmlns='http://www.w3.org/2000/svg' width=\"121px\" height=\"38px\" viewBox=\"0 0 121 38\"><path d=\"M0.786477689,37.3880765 L0.786477689,5 L0.786477689,5 C0.786477689,2.790861 2.57733869,1 4.78647769,1 L102.838012,1 L102.838012,1 C104.471746,1 105.941285,1.99354246 106.549997,3.50964209 L120.152151,37.3880765 L0.786477689,37.3880765 Z\" stroke=\"#2D94B5\" fill=\"#2D94B5\"></path></svg>") no-repeat;
  z-index: 10;
}
.active .label{
  color: #ffffff;
}

<div class="tabs">
<div class="tab"><div class="label">TAB 1</div></div>
<div class="tab"><div class="label">TAB 2</div></div>
<div class="tab active"><div class="label">TAB 3</div></div>
<div class="tab"><div class="label">TAB 4</div></div>
</div>

If you want to change the colours of background (fill) and border (stroke), just analyse the .tab and .active class, look for background property and search/edit the following on the inline svg:

for normal tab: stroke=\"#979797\" fill=\"#F0F0F0\"
for active tab: stroke=\"#2D94B5\" fill=\"#2D94B5\"

Hope it helps you

@Cons7an7ine unfortunately you can't add border on my first answer (which is now OPTION 1 after editing) because the actual tab is already the border itself. However, there is another approach, which is to use an SVG image as an inline background of the tab. See OPTION 2 on my answer above. — makoi07, Oct 03 '17 at 02:10
could you add another option by using transform: skewX()? Check this http://jsfiddle.net/bdhtn7kr/6/ — Cons7an7ine, Oct 03 '17 at 02:27
@Cons7an7ine there is no need to skew the element because the tabs that you are seeing is an actual XML-based vector image format already, if you want to change the appearance of the tab, you should edit the inline — makoi07, Oct 03 '17 at 02:34

score 0 · Answer 3 · answered Oct 02 '17 at 10:01

.tabButton{
  background: #ff0000;
  width: 100px;
  padding: 5px;
  position: relative;
}

.tabButton:before{
  content: ' ';
  position: absolute;
  top: 8px;
  right: -20px;
  border: 20px solid transparent;
  border-top-color: #ff0000;
  transform: rotate(45deg)
}

<div class="tabButton">
  Navigator
</div>

CSS Trapezoid Button With Solid Border

3 Answers3

Linked