CSS: The border line with a see-through section

I'm in the process of creating a div that has a unique design like this.

https://i.sstatic.net/cHJNY.png

.triangle-area {
  width: 100%;
  height: 150px;
}

.triangle1 {
  width: 100%;
  height: 50px;
  border-width: 50px 50px 0 50px;
  border-color: red transparent transparent transparent;
  border-style: solid;
  overflow: hidden;
  display: block;
  position: absolute;
  box-sizing: border-box;
}

.triangle2 {
  width: 50px;
  height: 150px;
  border-width: 50px 50px 50px 0;
  right: 0;
  border-color: transparent blue transparent transparent;
  border-style: solid;
  overflow: hidden;
  display: block;
  position: absolute;
  box-sizing: border-box;
}

.triangle3 {
  width: 100%;
  height: 50px;
  border-width: 0 50px 50px 50px;
  bottom: 0;
  border-color: transparent transparent green transparent;
  border-style: solid;
  overflow: hidden;
  display: block;
  position: absolute;
  box-sizing: border-box;
}

.triangle4 {
  width: 50px;
  height: 150px;
  border-width: 50px 0 50px 50px;
  border-color: transparent transparent transparent yellow;
  border-style: solid;
  overflow: hidden;
  display: block;
  position: absolute;
  box-sizing: border-box;
}
<div class="triangle-area">
  <div class="triangle1"></div>
  <div class="triangle2"></div>
  <div class="triangle3"></div>
  <div class="triangle4"></div>
</div>

My challenge now is figuring out how to prevent the transparent parts of each border line from overlapping. I also aim to have each triangle div act as a button with a hover effect, coloring the entire border line when hovered rather than just a portion.

https://i.sstatic.net/Iqg4A.png

htmlcss

Answer №1

If you're open to using a clickable image, consider implementing a map feature: (To keep it simple, I've only included the area for yellow)

<img src="https://i.sstatic.net/cHJNY.png" usemap="#my-links">
<map name="my-links">
  <area id="yellow" shape="polygon" coords="0,0,50,50,50,100,0,150" href="https://www.teamtrees.org/">
</map>

Answer №2

To enhance the styling of each div with the hover attribute, you simply need to add an additional style class. For instance:

.triangle1:hover {
  border-color: orange;
}

If you desire more intricate functionality, consider assigning an id and managing it using javascript.

Answer №3

If your goal is to modify the colors of individual borders while maintaining the transparency of the div itself, and you also want to make it a clickable element with some functionality, you can achieve this by incorporating the following CSS code...

/* Change red border color to grey on hover */
.triangle1:hover {
  border-color: grey transparent transparent transparent;
}

/* Change blue border color to grey on hover */
.triangle2:hover {
  border-color: transparent blue transparent transparent;
}

/* Change green border color to grey on hover */
.triangle3:hover {
  border-color: transparent transparent green transparent;
}

/* Change yellow border color to grey on hover */
.triangle4:hover {
  border-color: transparent transparent transparent yellow;
}

If you wish to add an event or function to the onclick action, you can assign an id for use in JavaScript or directly include the onclick function.

Answer №4

One way to achieve this effect is by using the clip-path property. Below is a simple example that is also responsive:

.box {
  margin:20px;
  width:300px;
  height:100px;
  position:relative;
}
.box > div:nth-child(1),
.box > div:nth-child(2){
   position:absolute;
   height:25%;
   top:0;
   left:0;
   right:0;
   background:red;
   clip-path:polygon(0 0, 100% 0,80% 100%,20% 100%);
}
.box > div:nth-child(2) {
  bottom:0;
  top:auto;
  transform:scaleY(-1);
  background:blue;
}

.box > div:nth-child(3),
.box > div:nth-child(4){
   position:absolute;
   width:20%;
   left:0;
   top:0;
   bottom:0;
   background:green;
   clip-path:polygon(0 0, 100% 25%,100% 75%,0 100%);
}
.box > div:nth-child(4) {
  right:0;
  left:auto;
  transform:scaleX(-1);
  background:purple;
}

.box > div:hover {
  filter:grayscale(100%);
}
<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

To maintain the same width and height of the element, you can make the following adjustments:

.box {
  margin:20px;
  height:200px;
  position:relative;
}
.box > div:nth-child(1),
.box > div:nth-child(2){
   position:absolute;
   height:50px;
   top:0;
   left:0;
   right:0;
   background:red;
   clip-path:polygon(0 0, 100% 0,calc(100% - 50px) 100%,50px 100%);
}
.box > div:nth-child(2) {
  bottom:0;
  top:auto;
  transform:scaleY(-1);
  background:blue;
}

.box > div:nth-child(3),
.box > div:nth-child(4){
   position:absolute;
   width:50px;
   left:0;
   top:0;
   bottom:0;
   background:green;
   clip-path:polygon(0 0, 100% 50px,100% calc(100% - 50px),0 100%);
}
.box > div:nth-child(4) {
  right:0;
  left:auto;
  transform:scaleX(-1);
  background:purple;
}

.box > div:hover {
  filter:grayscale(100%);
}
<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</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

Tips for making a scrollable container that allows its contents to overflow without clipping?

Currently working on implementing a horizontal card row for my website with a unique hover effect - the cards lightly rotate and raise on hover. Here is a preview: https://i.sstatic.net/eDQ59.gif To make this row responsive, I added overflow-x: auto; to e ...

htmlcss

JavaScript-generated div not recognizing CSS in Internet Explorer

Once again, dealing with Internet Explorer has become a major headache. On headset.no, we have incorporated a small blue search field. However, when you input "jabra" into the field, it should generate suggestions in a div underneath. This feature operates ...

javascripthtmlcssinternet-explorer

Div containing a centered span with a background

<div> <span style= "background: red; text-align: center;"> There seems to be an issue here </span> </div> The text alignment is not functioning as expected. I need the text to be centered along with the background. https://jsfiddl ...

css

Hide elements forever once the form is submitted

I'm seeking help to figure out how to make certain elements disappear after a form submission on my website's dashboard page. Specifically, I need to hide three elements once the user has submitted a form. Elements that need to be hidden: .vc_t ...

javascriptphpjquerycss

What is the best way to ensure that multiple bootstrap buttons in a row have the same width?

Could you help me figure out how to make the <div id="full"> element take up the full width of its parent container, while also ensuring that the 3 buttons inside share this width and have equal sizes with gaps between them? https://i.stac ...

htmlcssbootstrap-5

Tips for automatically scrolling images horizontally in responsive layouts

Recently, I've been working on a website called . On the homepage, my portfolio images are arranged in a grid format using the <li> tag. I'm looking to align them side by side and have them scroll horizontally automatically, preferably with ...

javascriptcssimagescrollresponsive-design

The width of the Ion-slide is dynamically determined by the styling

After transitioning my Ionic 2 project to Ionic 3, I encountered issues with ion-slides which are affecting my app's functionality. Upon app loading, specific widths are being defined in the style tags on the slides, disrupting the intended styling. ...

cssangulartypescriptsassionic3

Utilizing CSS Grid to create a modern layout design featuring a fullwidth header and footer,

I have a traditional website layout with a header, main content area with a sidebar, and a footer. I want the header and footer to span the entire width on wider screens, while the main content and sidebar are fixed width, surrounded by whitespace. When th ...

htmlcsspositioncss-grid

Ways to customize bullet points?

Is there a way to customize the bullet points in HTML? All my bullet points are displaying as stars instead of the standard black circle for the main bullets and a hollow circle for the sub-bullets. I attempted to set the style using list-style-type:disc ...

htmlvbaoutlook

Tips for customizing the appearance of path elements within an external SVG file being utilized as a background image

How can I change the color of the paths in an SVG background image assigned to a div using CSS? ...

htmlcsssvg

ReactJS Scripts are throwing an error indicating that the function require is not defined

Just starting out with React and I discovered that we can integrate React by adding the necessary scripts to our main index.html file. I followed all the steps to include the script and even made sure to add Babel since I'm writing my main App in JSX. ...

javascripthtmlreactjs

Error: Invalid Argument - The argument 'PanelController' is expected to be a function, but it is undefined

Here is a snippet of my HTML code: <body ng-controller="StoreController as store"> ........... <section ng-controller="PanelController as panel"> <ul class="nav nav-pills""> <li ng-class="{active:panel.isSe ...

javascripthtmlangularjs

The CSS styles do not seem to be taking effect on the Bootstrap

Here's a snippet of code extracted from my website's html and css files. My intention is to make the navbar slightly transparent with centered links, but for some reason, the css styles are not applying correctly to the navbar. HTML <body ...

htmlcssbootstrap-4

What is the best way to split an input field into distinct fields for display on the screen?

Take a look at this image: https://i.stack.imgur.com/LoVqe.png I am interested in creating a design similar to the one shown in the image, where a 4 digit one-time password (OTP) is entered by the user. Currently, I have achieved this by using 4 separate ...

javascripthtmlcsstwitter-bootstrap

Position the <i> element to the right side of the <div> element in an HTML document

I am trying to make this <i> element align to the right within my <div>. Here is the HTML code I have so far: <div class="container-fluid p-1 bg-primary text-white d-flex align-items-center justify-content-center"> <h2&g ...

htmlbootstrap-5

Verify that the web element has a class containing the pseudo selector (:first-child) applied using Selenium WebDriver

Whenever I have a css style that uses the pseudo selector first-child: .point:first-child { margin-left: 0; } Could one find out if a specific DOM element has the class point with the :first-child pseudo-selector applied? .getAttribute("class") isn&a ...

cssselenium

The HTML dropdown menu is malfunctioning

I've been struggling to create a website with a dropdown menu. Despite following various guides and searching for solutions, the menu is behaving strangely. I've tried numerous tactics, so some lines of code may be unnecessary. The submenu is ap ...

htmlcss

Cordova - Fixed elements flicker/blink when scrolling

I have exhausted all possible solutions, ranging from -webkit-transform: translate3d(0,0,0); to -webkit-backface-visibility:hidden but none of them seem to resolve the issue of an element flickering/blinking/disappearing when scrolling on iOS with - ...

javascripthtmlcordovaphonegap

Double Row Navbar Struggles in Bootstrap 4

I have been experimenting with creating two bootstrap navbars. The first one features the website's domain name in the center, accompanied by a dropdown menu to navigate to other sections. Each of these sections has its own subbar containing specific ...

htmlcssbootstrap-4navbar

Ways to enhance a browser's response with soup

I have a script that sends multiple requests to a website using RoboBrowser and retrieves responses, but now I need to filter these responses to exclude any containing the phrase "Case Status Not Available". I attempted to use Beautiful Soup for this purpo ...

htmlpython-2.7beautifulsouprobobrowser