Home/ Questions/Q 8939229
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T10:46:56+00:00

I want to give an element a border-top with a tab at the right

  • 0

I want to give an element a border-top with a tab at the right corner like this:

Since this will be a repeated element within an Adobe Business Catalyst template, I want it to be pure CSS or at least CSS and javascript, without the use of any images. Is there any way this can be done?

Since it’s just a decorative element, it doesn’t have to be cross-browser.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Have a look at this:

    http://jsfiddle.net/8hB7E/

    HTML:

    <body>
<div class="element">

</div>
</body>

    CSS:

    body { background: #555 }

.element { background: #000; border-top: 2px solid #fff; height: 100px; position: relative; width: 300px; }

.element:after { background: #fff; content: " "; height: 10px; position: absolute; right: 0; top: 0; width: 20px; }

    It utilises the :after pseudo-element (which I find to be really useful!)

    For more info see here:

    http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

    Unfortunately this won’t work in IE7 or 6 – it’s not core to the functionality of the website though, so I’d say it’s ok as is.

    • 0