Creating a border and transparent space within a CSS triangular design

I am looking to create a unique design element for my website using CSS. The pattern I want to achieve involves a triangular cutout separating two sections of the page:

https://i.sstatic.net/08BL0.jpg

After exploring the skewX() technique detailed in this answer, I was able to successfully replicate the triangular cutout effect. By adding two pseudo-elements to the top of the lower section, skewed in opposite directions, I created the desired look:

https://i.sstatic.net/3sypK.png

However, I am encountering difficulty in adding the border shown in the initial image. The challenge lies in creating a transparent gap between the border and the lower section, so that the background of the upper section can show through. Since the upper section background can vary (gradient, image, etc.), using a fixed image for the cutout is not a feasible solution.

Is there a CSS-based approach that would allow me to achieve this effect while maintaining the flexibility of the design?

cssbordercss-shapesskew

Answer №1

Using CSS to create this effect is challenging, as it requires a complex approach involving multiple gradients to simulate borders. Normal borders do not suffice in this case, as they either extend beyond the meeting point or leave a gap between the border and the filled area. Box shadows also do not work due to the need for transparency in the gap between the border and the filled area. While there may be ways to achieve this with normal borders or box shadows, my attempt focused on using gradients.

Here is the method I used to achieve the border effect:

  • I utilized four linear gradients to create the necessary borders.
  • The first two gradients are solid colors positioned on the left and right to create horizontal lines just above a transparent cut produced by pseudo-elements.
  • The remaining two gradients produce angled lines with the required thickness for the border.
  • By carefully adjusting the size and position of all four gradients, the border effect is achieved.

The output, responsive to hover effects on the element, demonstrates the success of this approach.

div {
  position: relative;
  height: 200px;
  width: 300px;
  /* Additional CSS properties */
}

<div></div>

For setting the background properties based on desired border color and width, the following guidelines can be followed:

  • Ensure the colors in the gradients match the border color.
  • Adjust the background size and color stops to control the border thickness and appearance.
  • Position the backgrounds to create the desired gap between the colored area and the border.
background: linear-gradient([color, [color]),
            linear-gradient([color], [color]), 
            /* Gradient settings */
            radial-gradient(circle, [color1] 0%, [color2] 100%); /* Actual background */

To achieve a transparent cut with a border on the top part of the lower div, the following CSS snippet can be used:

div {
  height: 200px;
  width: 300px;
  /* Additional CSS properties */
}

<div></div>

Answer №2

Here is another innovative approach using gradients, borders, and shadows, inspired by (@Harry): Having a set width makes the process easier, but if not, adjustments to shadow offset values may be necessary using calc().

div.bdr {
  padding-bottom: 5px;/* Used to create a transparent line */
  background: #1B4046;
  background-clip: content-box;/* Adds a 5-pixel transparent line */
  box-shadow: -273px 5px 0 #1B4046, 274px 5px 0 #1B4046; 
  /* Shadows are moved away to create partial drawings
  Note: Wrapper must hide overflow */
  margin-bottom:2em;
}

.bdr.bg-color{
  background-color: tomato;
  background-image: linear-gradient(to top, transparent 5px, #1B4046 5px);
  background-clip: border-box;
}

div.bdr:after {  
  content: '';
  height: 30px;
  width: 30px;
  padding: 5px; 
  display: block;
  margin: auto;
  z-index: -1;
  transform: rotate(45deg);
  margin: -20px auto -20px;
  background:  #1B4046;
  background-clip: content-box;/* Keep some parts transparent */
  box-shadow: 6px 6px 0  -1px #1B4046;  
}

.bdr.bg-color:after {
  z-index: 0;
  padding: 5px 0 0 5px;
  border: 5px solid transparent;
  border-left: 0;
  border-top: 0;
  box-shadow: 6px 6px 0  -1px #1B4046;
  background: linear-gradient(to bottom right, transparent 50%, #1B4046 50%) no-repeat, linear-gradient(to bottom right, transparent 50%, tomato 50%) 5px 5px  no-repeat;
}

article {
  width: 500px;
  margin: auto;
  color: white;
}

h1 {
  text-align: center;
}

div.shapebdr {
  padding-bottom: 40px;
  margin: 32px 0;
  background: linear-gradient(to top, transparent 30px, #1B4046 30px, #1B4046 35px, transparent 35px) bottom left, linear-gradient(to top, transparent 30px, #1B4046 30px, #1B4046 35px, transparent 35px) bottom right, linear-gradient(to top, transparent 40px, #1B4046 40px) bottom;
  background-repeat: no-repeat;
  background-size: 230px 100%, 230px 100%, 100% 100%;
  position: relative;
}

div.shapebdr:after {
  content: '';
  height: 40px;
  width: 40px;
  padding: 10px;
  display: block;
  margin: auto;
  z-index: -1;
  background: inherit;
  transform: rotate(45deg);
  margin: -40px auto -20px;
  background: linear-gradient(to top, #1B4046, #1B4046) no-repeat, linear-gradient(to top, #1B4046 0, #1B4046 5px, transparent 5px) no-repeat right, linear-gradient(to left, #1B4046 0, #1B4046 5px, transparent 5px) no-repeat bottom right;
  background-clip: content-box, border-box, border-box;
  background-size: auto auto, 57% 100%, 100% 57%;
}

div.br:after {
  margin: auto;
  margin-bottom: -40px;  
}

article {
  overflow: hidden;
  padding-bottom: 40px;
}

html {
  min-height: 100%;
  background: linear-gradient(30deg, gray, yellow, purple, lime, tomato, turquoise, gray);
}

p {
  padding: 0.25em;
  margin: 0.25em;
  position: relative; /* Ensure text displays over the pseudo element */
}
<article>
  <h1>Border and Shadow Approach</h1>
  <div class="bdr">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at blandit felis. Etiam ultricies turpis vel enim vulputate, ut iaculis justo varius. Proin id placerat purus. Nam auctor venenatis felis non pretium.</p>
  </div>
  <h1>Gradient Approach</h1>
  <div class="shapebdr">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at blandit felis. Etiam ultricies turpis vel enim vulputate, ut iaculis justo varius. Proin id placerat purus. Nam auctor venenatis felis non pretium.</p>
  </div>
   <h1>Shadow + Gradient Approach to Create Translucent Line</h1> 
  <div class="bdr bg-color">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at blandit felis. Etiam ultricies turpis vel enim vulputate, ut iaculis justo varius. Proin id placerat purus. Nam auctor venenatis felis non pretium.</p>
  </div>
</article>

Link to CodePen for interactive demo

Answer №3

Couldn't resist sharing another variation...

Though not a flawless solution due to numerous hand-calculated values, it may be suitable if the dimensions remain constant.

.design {
  width: 400px;
  height: 80px;
  margin-top: 100px;
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(-120deg, transparent 31px, lightblue 21px),                       linear-gradient(120deg, transparent 31px, lightblue 21px);
  background-size: 50% 80%, 50% 80%;
  background-repeat: no-repeat;
  background-position: 0px 100%, 100% 100%;
}


.design:before {
  content: "";
  position: absolute;
  width: 50%;
  height: 50px;
  border-top: solid 4px blue;
  border-right: solid 4px blue;
  top: 0px;
  right: calc(50% - 2px);
  transform: skewX(30deg);
  transform-origin: right bottom;
}

.design:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 50px;
  border-top: solid 4px blue;
  border-left: solid 4px blue;
  top: 0px;
  left: calc(50% - 2px);
  transform: skewX(-30deg);
  transform-origin: right bottom;
}
<div class="design"></div>

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

Managing line breaks in CSS

Here is a sample of HTML code with text lines breaking: <pre> one two three four five six </pre> I am looking to display it in the browser like this (with two lines per row and space using tab character "\t"): one two three four ...

htmlcss

How can I add navigation dots to my slider?

I've been experimenting with my slider and I managed to make it slide automatically. However, the issue is that there is no option to manually navigate through the slides. I am looking to add navigation dots at the bottom so users can easily switch be ...

javascriptjqueryhtmlcssslider

When working in Flask, I am experiencing an issue where my CSS is not linking to my

I am new to coding with HTML, CSS, and Flask and I have encountered an issue where my CSS styling only partially affects my HTML file. Here is the HTML code snippet: <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

pythonhtmlcssflask

JavaScript Loading Screen - Issues with window.onload functionality

I am currently working on creating a loading screen for my project. I need to use JavaScript to remove the CSS property "Display: none" from the page, but for some reason, my code is not functioning as expected. The Issue: I discovered that using window. ...

javascripthtmlcss

Element in list displaying a distinct alignment from the rest

I currently have a navigation bar based on a list, which looks something like this: https://i.stack.imgur.com/e1Dmb.png My concern is how to position the "Logout" item on the right side of the screen. I've tried adding clear list items but that seem ...

htmlcsslistnav

Styling Tip: Aligning text to the baseline of a height-adjusted input field using CSS

As per the information from the Mozilla documentation, it states that I can align the text in an input field to the baseline if the element's display property is set to inline-block. I have made adjustments to the height of several input elements, bu ...

htmlcss

Tips for showcasing div content on a separate line rather than inline within a collapsible <a> tag

I am currently working on integrating a sidebar using bootstrap 5. When I click on the user initials, I want something like this to happen (collapse): https://i.sstatic.net/ejbhD.png However, the result I'm getting is different: https://i.sstatic. ...

htmlcsstwitter-bootstrapbootstrap-5

Leverage the calc() function within the makeStyles method

const useStyles = makeStyles((theme) => ({ dialog: { '& .MuiTextField-root': { margin: theme.spacing(1), } }, address: { width:"calc(24vw + 8px)" }, })); <div> <TextField id="contact ...

cssreactjsmaterial-uijssinline-styles

Clicking on the icon image that features a Background Video will trigger the video to play in a popup window originating from the same location

A background video is currently playing on the site. When the play icon is clicked, the video should start playing in a popup. The video should start playing continuously from the exact moment and position where it is clicked. Check out the example here. ...

javascriptjquerycsspopuphtml5-video

Aligning the H3 and Anchor tags at the bottom of the page

I am currently utilizing Bootstrap 3.0 and hoping to achieve a layout similar to this: Favorites Add I want the "Favorites" text to be aligned on the left and enclosed in an H3 tag, while the "Add" link is aligned on the right within an anc ...

csstwitter-bootstraptwitter-bootstrap-3

Animating lines with JQuery beneath navigation links

Currently in the process of revamping my portfolio website, and it's still a work in progress. Recently stumbled upon a jquery tutorial that enables a line to animate under anchor elements on hover, which I find quite intriguing. However, I am facing ...

jqueryhtmlcssanchor

What is the best way to create a horizontal scrolling feature for a two-row layout using Bootstrap?

When using one row, the script works successfully. Here is an example of the code: html : <div class="testimonial-group"> <div class="row"> <div class="col-md-4">1</div> <div class="col-md-4">2</div> < ...

htmlcssscrollbootstrap-4row

Height specification in Tailwind Grid

Hi there! I'm currently working on implementing a grid system in NextJS using Tailwind CSS. However, I've hit a roadblock when it comes to automatically sizing the grids to fit the parent element. Let me illustrate my issue with two images below ...

csslayoutnext.jstailwind-csscss-grid

Styling Your PHP Output with Echo

Is there a way to create a compact text box with a scroll bar that can display recurring data generated by PHP activities on the server side? How can I format it in this way? ...

phphtmlcss

Load the jQuery script only in the absence of cookies

Hey there! I have a cool fade out effect on a website I'm working on. When you go to the site, a div containing the title of the site appears and then fades away after a while. It's pretty simple yet effective. <div class="loader"><h1&g ...

jquerycsscookies

What's the best way to eliminate letter-spacing only for the final letter of an element using CSS?

Displayed above is the image in question from my HTML page. The text menu is contained within a right-aligned div, with a letter spacing of 1.2em. Is there a way to target this specific element with a pseudo-selector? I'd prefer not to use relative po ...

csscss-selectorsletter-spacing

Using a combination of CSS selector, several attributes, and the OR operator

Can you assist me with CSS selectors? Let's say we have a style HTML tag: <style type="text/css"> [...selector...] {color:red;} </style> I want to create a selector with multiple attributes and logical operators, but I am uncertain about ...

csscss-selectors

Insert image using AJAX

I am attempting to use Ajax to dynamically add an <img> element to a div on my webpage. The image's name needs to be fetched from a database. Although I have successfully added the <img> tag to the div and set the correct source (src) att ...

javascriptjqueryhtmlcssajax

Enhance user experience with dynamic color changes in JavaScript

Looking to create a navigation menu with unique colors for each selected state? Check out the code below! After searching extensively, I stumbled upon this snippet. While it only includes one selected state, you can easily customize it for three different ...

javascriptcss

What is the formula to determine the sizes of grandchildren div containers?

Hey everyone, I'm having some trouble with my jQuery code and I can't seem to figure out what's going on. Here's the scenario: I'm creating a few divs (based on entries from MySQL) and I'd like to show you the end result: ...

javascriptjquerycsshtml