Creating a border with tabs and a triangle using CSS

I'm having trouble getting my HTML/CSS tabs to look like the ones in the image.

I've experimented with border-radius but haven't been able to achieve the desired result. Can anyone provide guidance on how to replicate these tabs using only CSS?

cssbordercss-shapes

Answer №1

To achieve the same border effect, including inside the triangles shown in the image, you can utilize pseudo elements along with transform rotate :

SEE DEMO

Here is the output :

HTML :

<div>Critiques</div>
<div>Messages sur le forum</div>
<div>Actualités</div>

CSS :

div{
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    padding-right:12px;
    line-height:50px;
    float:left;
    width:200px;
    position:relative;
    z-index:0;
    text-align:center;
}

div:after,div:before{
    content:'';
    position:absolute;
    width:10px;
    height:10px;
    background:#fff;
    z-index:999;

    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

div:before{
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    top:0; left:-12px;

     -ms-transform-origin:100% 0;
    -webkit-transform-origin:100% 0;
    transform-origin:100% 0;
}

div:after{
    border-left:1px solid #ccc;
    border-top:1px solid #ccc;
    bottom:0;
    right:4px;

     -ms-transform-origin:0 100%;
    -webkit-transform-origin:0 100%;
    transform-origin:0 100%;
}
div:first-child:before, div:last-child:after{
    display:none;
}

Answer №2

You can achieve this effect using only CSS, including an empty span for half triangles at the edges:

HTML 

<ul>
    <li><span></span>one</li>
    <li><span></span>two</li>
    <li><span></span>three</li>
</ul>

CSS

    ul {
        font-size: 0;
    }

    li {
        background: red;
        display: inline-block;
        padding: 30px;
        font-size: 15px;
        position: relative;
    }

    span {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    li:after {
        width: 0;
        height: 0;
        border-top: 10px solid white;
        border-left: 10px solid transparent;
        position: absolute;
        right: 0;
        top: 0;
        content: "";
    }

    li:before {
        width: 0;
        height: 0;
        border-top: 10px solid white;
        border-right: 10px solid transparent;
        position: absolute;
        left: 0;
        top: 0;
        content: "";
    }

    span:before {
        width: 0;
        height: 0;
        border-bottom: 10px solid white;
        border-right: 10px solid transparent;
        position: absolute;
        left: 0;
        bottom: 0;
        content: "";
    }

    span:after {
        width: 0;
        height: 0;
        border-bottom: 10px solid white;
        border-left: 10px solid transparent;
        position: absolute;
        right: 0;
        bottom: 0;
        content: "";
    }

Check out an example here: http://jsfiddle.net/fC9Fs/

Answer №3

Here is a different perspective:

This approach utilizes a simple list structure without the need for additional HTML.

As illustrated in the image, the first and last items in the list do not feature an arrow.

Check out the Fiddle

HTML:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

CSS:

html, body{
    background:#E5E2E2;
}

ul{
    display:inline-block;
    list-style-type:none;
    border:1px solid #CCCCCC;
    padding:0;
}

li{
    float:left;
    padding:10px 15px;
    background:#F4F4F4;
    position:relative;
}

li:nth-child(n+2):before{
    content:'';
    position:absolute;
    left:-5px;
    top:-1px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #e5e2e2;
}

li:nth-child(n+2):after{
    content:'';
    position:absolute;
    left:-5px;
    bottom:-1px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #e5e2e2;
}

Answer №4

To achieve the desired shape, consider using an octagon design as illustrated in this reference.

Highlighted below is the necessary code:

#octagon { width: 100px; height: 100px; background: red; position: relative; } 
#octagon:before { content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; } #octagon:after { content: ""; position: absolute; bottom: 0; left: 0; border-top: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; }

By adjusting the border properties in the code provided, you can customize the shape to meet your specific requirements.

Answer №5

Introducing a new trick to cut corners and reveal the main background: Check out the DEMO here

You can also add borders too: See the DEMO with borders here

This method involves using background-color from box-shadow on rotated pseudo-elements, creating shapes that basic border triangles cannot achieve. Pseudo elements can be customized with various shapes using radius and transform properties... maybe this will inspire some new ideas :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is storing text in data-content and utilizing bootstrap-popover.js compatible?

Is it possible to display HTML content in a popover using ? How reliable is it to store text in data-content? Can we expect it to function properly across all browsers? ...

phpjavascripthtmlcsstwitter-bootstrap

PHP and mysqli combine to create a versatile image slider with changing images

I am looking to implement an image slider that can be updated by the admin using php and mysqli. The admin should have the ability to easily add or remove images as needed. ...

phpjqueryhtmlcss

The logo on my header is being covered by the menu due to the CSS code

Check out my website at bee-barcelona.herokuapp.com I'm facing an issue where the menu overlaps with the logo when I resize the browser or view the webpage on a tablet. I want to fix this using CSS. What changes do I need to make to ensure that the e ...

htmlcss

Setting the color for the :hover and :active states on a react JSX component: A step-by-step guide

<button onClick={fetchExchangeRates} style={{ backgroundColor: `${selectedColor}` }} className="hover text-white px-3 py-1 flex justify-center items-center gap-2 text- rounded-md" > Convert <FontAwesomeIcon className=&apo ...

cssreactjsdynamictailwind-css

adjusting label widths using jQuery mobile

I am currently using jQuery mobile to develop my user interface, however I am facing an issue with adjusting the width of my labels. Can anyone provide guidance on how to set the width of all my labels to 108px? http://jsfiddle.net/GZaqz/ Check out the c ...

htmljquery-uicssjquery-mobile

Using jQuery's slideToggle feature to hide content when clicked again or when a different button is

I have a challenge with creating toggle buttons that require specific functions: 1) Display content on the first click (this is working) 2) Conceal content when another button is clicked (this is also working) 3) Hide content on the second click (this i ...

javascriptjqueryhtmlcss

Conceal Choices During Search using jQuery Select2

I'm having trouble figuring out how to make the Select2 plugin work for my specific color selection feature. My goal is to allow users to choose 5 colors from a list, including an "Other" option. When the user selects "Other", they should be able to ...

jquerycssjquery-select2

Activate a CSS class on an image upon hovering over a div (WordPress)

In my current setup, I have a loop that retrieves and displays posts using the following code: <div class="row" style="margin-bottom:50px;"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <a h ...

phpjqueryhtmlcsswordpress

Even though the if statement has been implemented, the page continues to show null objects

So, I have an if statement that filters out null objects and it's working fine. However, when I try to insert something in join() like join("li"), all null objects are displayed on the page as shown in the image. I just want to display objects that ar ...

javascriptjqueryhtmlcss

CSS animations are not functioning properly on disabled Bootstrap buttons

One issue I'm facing is with a BootStrap button that I'm rendering in React. The button has a property or a condition that determines if it's disabled: <Button bsClass="fill" disabled={!props.purchaseble} onClick={conso ...

htmlcssreactjstwitter-bootstrap

Refrain from engaging with "disabled" table rows to prevent user interaction

I have an HTML table with certain rows marked as 'disabled'. To make this clear to the user, I decided to apply a blur filter to the tr, resulting in a table that looks like this: https://i.stack.imgur.com/GcX67.png NOTE: You can view a live ex ...

htmlcss

The CSS provider for Gtk+3 is malfunctioning

I've been attempting to set an image as the background of a GtkBox using a CSS provider, and also customize the style of some label text, but no matter what I try, nothing seems to work. Below is the content of my custom.css file: GtkBox#Home_Princi ...

csscgtk3

Ways to implement border spacing using CSS

Here's a snippet of the code I've been working on: HTML: <html> <body> <div id="article"> <h1>TITLE</h1> <p>text</p> </div> </body> </html> CSS: #article { colo ...

htmlcss

Ways to set a background image for two separate components in Angular

Trying to figure out how to integrate this design: The challenge lies in having a background image that spans across the navbar and the content below it. Currently, the code separates the navbar component from the content component, making it tricky to ac ...

htmlcssangular

When you hover over a dropdown menu, the content underneath it is raised slightly and a margin is formed on the right side of the page

I am facing some technical difficulties with my photography website, specifically on the "Contact" and "Bio" pages. The issue arises when the screen is resized, causing layout changes. When hovering over the "Albums" menu tab and the drop-down menu appears ...

htmlcssdrop-down-menu

How come inactive links are still able to be clicked on?

I have been experimenting with various methods to disable links, but I seem to be unable to prevent them from being clickable. While I was successful in changing the cursor to 'not-allowed' when hovering over the disabled link, it still remains c ...

htmlcss

Once it hits the fourth tab, it must not cycle back to the first one

Hi there, I'm new to JavaScript I noticed that when I click the left and right arrows, the tabs circle back to the beginning However, I would like the circle to stop. When it reaches the fourth tab, it should not go back to the first. This should also ...

javascriptjqueryhtmlcss

The hyperlink for social media is not functioning properly within a list element

Having some trouble with the href-tags for social media on my contact page. Clicking on them doesn't seem to do anything. Any ideas on what might be causing this issue? html { height: 100%; box-sizing: border-box; background-color: #001725; ...

csshtmlhrefbrackets

elements with a display of inline-block and a fixed body width

My inline-block elements are setting the width of the page, but the header and footer tags are not taking up the full width. Why is this happening and how can I make them span the entire page width? Check out the example here Here's the HTML code: ...

htmlcss

What is the best way to make my button sticky across different screen sizes on my webpage?

I'm having trouble figuring out how to make my purple button sticky and responsive on the right side of the screen as I scroll down. Can someone help me with this? This is the snippet of my HTML code: <Col className="colPre"> ...

htmlcssreactjs