2

I am trying to create this:

enter image description here

However, just using

border:10px solid green;
border-top:20px solid black;

Creates this image instead

enter image description here

There are pretty straight forward way to accomplish this.

You can use 2 elements https://jsfiddle.net/5rnn328n/
Or a pseudo element https://jsfiddle.net/5rnn328n/2/

But both seem hacky.

Is it possible to accomplish this styling just a single element? ie. I have a single div and all I can use is inline styling.

<div style="[insert answer here]"></div>
lonewarrior556
  • 3,917
  • 2
  • 26
  • 55
  • 1
    I found an answer on another stackoverflow thread that may work for you: http://stackoverflow.com/questions/22534084/can-i-create-border-bottom-without-diagonal-corner – Zoop Mar 27 '17 at 15:43

1 Answers1

1

You can use box-shadow property...

div {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-top: 20px solid black;
  box-shadow: inset -20px 0px green, inset 20px 0px 0px green, inset 0 -20px 0px green;
}
<div></div>
sol
  • 22,311
  • 6
  • 42
  • 59