Outline of a transparent right trapezoid shape

I'm attempting to create a slanted path line that resembles this particular image.

The method I am currently using involves two trapezoid shapes, positioning one on top of the other to blend in with the background, as demonstrated in this jsFiddle example.

However, I now realize that I want the remainder of the shape to be see-through rather than overlapping with other elements.

The structure is primarily CSS based, with an outlineMaker div nested within a rightTrapezoid div.

.rightTrapezoid {
    border-bottom: 100px solid red;
    border-left: 0 solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}
.outlineMaker {
    border-bottom: 80px solid white;
    border-left: 0 solid transparent;
    border-right: 40px solid transparent;
    height: 20px;
    width: 80px;
}

Is there a concise and elegant way to achieve this effect?

csstransparencycss-shapes

Answer №1

Here is a complete example demonstrating a neat technique using @Feng Huo's suggestion.

HTML Markup

<div class="trapezoidLine1">
    <div class="trapezoidLine2"/>
</div>
<div class="trapezoidLine3">
    <div class="trapezoidLine4"/>
</div>

CSS

.trapezoidLine1 {
  position: absolute;
  width: 200px;
  height: 2px;
  background: blue;
}
.trapezoidLine3 {
  position: relative;
  margin-top:45px;
  width: 207px;
  height: 2px;
    background:blue;
  }
.trapezoidLine2 {
  position: absolute;
  width: 47px;
  height: 2px;
  background: blue;
  left: 200px;
  -webkit-transform-origin: 0% 0%;
  -webkit-transform: rotateZ(80deg);
}

.trapezoidLine4 {
  position: absolute;
  width: 45px;
  height: 2px;
  background: blue;

  -webkit-transform-origin: 0% 0%;
  -webkit-transform: rotateZ(270deg);
}

Give it a try on the Fiddle

http://jsfiddle.net/TNW63/

Answer №2

Instead of struggling to find a solution, I took a moment to think and realized I could simply achieve what I wanted by implementing this:

<div class="trapezoidLine1">
  <div class="trapezoidLine2"/>
</div>

.trapezoidLine1 {
  position: absolute;
  width: 200px;
  height: 10px;
  background: blue;
}

.trapezoidLine2 {
  position: absolute;
  width: 200px;
  height: 10px;
  background: blue;
  left: 200px;
  -webkit-transform-origin: 0% 0%;
  -webkit-transform: rotateZ(45deg);
}

Well, that was easier than I thought...

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

Steps for designing a stationary footer in HTML and CSS

I have implemented a static footer on my website: HTML <div class="card fixedFooter"> <div class="card-body space-around"> <button type="button" class="buttonFooter" routerLink="/myRouter" > <i class ...

htmlcssbootstrap-4footer

Issue with stretched links in Bootstrap 5 specifically affecting certain recurring elements on mobile devices

I am facing an issue with a table that has a few hundred rows generated by a recurring PHP script. Utilizing Bootstrap 5, I am using a stretched link to enable the entire row of the table to be clickable. The functionality works perfectly on desktop and ev ...

htmlcssbootstrap-5mobile-browser

Creating Stylish Buttons with Icons in Rails 3.1 Using CSS

Is there a way to incorporate an icon into a Rails button using CSS? I am looking for assistance with both <% button_to %> and <% f.submit %> Thank you for your help Hello @jdc, I have figured out a solution on my own. While I didn't us ...

ruby-on-railscssbuttonicons

Create a typewriter effect that mimics the backspace feature by allowing overlapping characters

I am interested in creating a simulation for the vintage LGP-30 computer. This will involve input and output on a simulated Friden Flexowriter typewriter. One unique feature of the typewriter is that pressing the backspace key merely shifts the print head ...

htmlcsstypescriptsveltesveltekit

Instructions for correctly integrating the ng2-datepicker module into an Angular 2 application

Ng2-datepicker (1.0.6) Angular2 (2.0.0-rc.5) As I attempted to implement it in my HTML following the documentation, I encountered the following error: zone.js:484 Unhandled Promise rejection: Template parse errors: Can't bind to 'ngMode ...

javascripthtmlcssangularng2-datepicker

When a user clicks on an image, I would like to dynamically resize it using a combination of PHP

Although I have a good understanding of CSS and HTML, my knowledge of Javascript is limited. I am looking to add an interactive element to my website where an image enlarges gradually when clicked and smoothly moves to the center of the screen in one con ...

javascripthtmlcss

When scrolling, the sticky <td> element on the table is overlapping with the sticky <th> header, causing the <td> border to disappear. What is the solution to fix this issue?

I am trying to set up a table that has a fixed header when scrolling up and a fixed first column when scrolling left. I have applied 'position: sticky' with 'top:0' for the header and 'left:0' for the first column. However, I ...

htmlcsshtml-tablebootstrap-4sticky

Non-clickable image

My social media page icons are not hyperlinked, and I can't figure out why. I've surrounded them with the href attribute, but for some reason, it's not working. Can anyone provide assistance? Here is the HTML code: <!DOCTYPE html> ...

htmlcsshyperlinkicons

Dividing a pair of CSS stylesheets on a single HTML page

Currently, I am working on a HTML page that includes multiple javascripts and css files in the header section. <link href="@Url.Content("~/Content/css/main.css")" rel="stylesheet" type="text/css" /> In order to make the website mobile-friendly, I s ...

javascriptjqueryhtmlcss

Unicef's animated web content

Looking to learn more about gate animation and zoom page transition on the Unicef website? I want to incorporate these cool animations into my own project. Can someone provide me with a "keyword" or point me in the right direction to find information on ...

javascriptcsshtmlweb-animations

Personalizing/Concealing Navigation Controls

Looking for a way to customize the Navigation in the Pagination Plugin; changing 'First, Prev, Page 1, Page 2, Next, Last' to 'Prev, Next, Page 1 of 2' The documentation suggests using show_first_last set to false to hide 'First/L ...

javascriptjqueryhtmlcss

Switching the background color of the page when hovering over it

<div class="projects-list home-1"> <article class="whispers"> <h1>Whispers</h1> <figure> <a href="/projects/whispers.html"> ...

javascripthtmlcss

Struggling to fix the excess white space appearing underneath my website

I am new to HTML/CSS and I'm currently working on adding a timeline to my website. However, I've encountered a strange issue with the #timeline class where there is an odd block of space below it whenever I try to adjust the height. So far, I ha ...

htmlcssuser-interface

Designing with Bootstrap panels

Hey there! I'm a newbie when it comes to using Bootstrap and I'm currently struggling to create a panel template. I feel like I'm going nowhere fast with this, so could someone please guide me on how to complete the rest of it? I'm almo ...

htmltwitter-bootstrapcss

The issue of transform scale not functioning properly in conjunction with background clip and gradients in CSS

Looking to transform a div with the transform: scale(-1,1) property while using background-clip: text on the text within it. However, this causes the text to disappear. Here's what I've attempted: .reverse { transform: scale(-1, 1); } .gr ...

javascripthtmlcss

Ways to align an image and text vertically next to each other within a div

After coming across the solution for ''Vertical Align in a Div ", I decided to implement Adam's answer. However, my challenge lies in figuring out how to display both an image and text side by side with the text centered vertically. View My ...

htmlcss

Enable the hover font color effect to be applied to the entire li box

Is there a way to change the font color to #fff when hovering over the entire li box, instead of just the href link? Currently, the hover color switches between #fff and #666 because the full li box is not considered a link. In case it's relevant, th ...

htmlcss

Struggling to implement a sidebar in HTML using jQuery and running into issues?

I am struggling to create a template that includes a navbar, sidebar, and other elements that can be used across multiple HTML files. Despite trying different approaches, including changing the jQuery version and downloading jQuery, I am unable to make it ...

javascripthtmljquerycss

What is the best way to achieve two columns of the same height, with the right column nested inside the left column?

Is there a way to create two equal height columns with the right column inside the left column using pure CSS? I have explored different methods, but due to the lack of a parent selector in CSS, I haven't been successful so far. My goal is to have ex ...

htmlcss

Delay the execution using Javascript/jQuery, remove the last element from the DOM

Within a jQuery AJAX call, I am using a $.each() loop. Each element in the response data triggers the addition of a portion of HTML to a container class in my index.html file. To view the code and ensure proper formatting, visit the codepen here as the pa ...

javascriptjqueryhtmlcss