Design a triangular shape using CSS only

Question

Design a triangular shape using CSS only

I am working on a responsive web application and I need to have two distinct content areas set up in the following manner: https://i.sstatic.net/5Q6L7.jpg

Up to now, I have attempted:

border-right: 30px solid transparent;
border-bottom: 30px solid #4c4c4c; 
height: 100%;
width: 100%;
position: fixed;

Unfortunately, I was unable to create a triangle shape.

Is there an alternative method in CSS to create a triangle while still allowing the content to be fully contained within the div, other than using the border property?

Any assistance would be greatly appreciated.

html css svg css-shapes

Answer 1

Answer №1

It appears that you are in search of triangles with distinctive borders and a transparent division in between, which none of the current responses seem to cover accurately. Allow me to provide an example. Achieving this effect is indeed possible but requires a significant amount of manipulation.

The CSS Transforms Method:

The following code snippet utilizes pseudo-elements and transforms to generate the triangular effect. While the output is responsive, the utilization of skew transforms means that adjustments to the skew angles would be necessary if the container's shape changes to a rectangle. Additionally, further tweaking of positioning attributes may be required.

.container {
  position: relative;
  overflow: hidden;
  height: 200px;
  width: 200px;
}
.div-1,
.div-2 {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* CSS Code continues... */

Answer 2

It appears that you are in search of triangles with distinctive borders and a transparent division in between, which none of the current responses seem to cover accurately. Allow me to provide an example. Achieving this effect is indeed possible but requires a significant amount of manipulation.

The CSS Transforms Method:

The following code snippet utilizes pseudo-elements and transforms to generate the triangular effect. While the output is responsive, the utilization of skew transforms means that adjustments to the skew angles would be necessary if the container's shape changes to a rectangle. Additionally, further tweaking of positioning attributes may be required.

.container {
  position: relative;
  overflow: hidden;
  height: 200px;
  width: 200px;
}
.div-1,
.div-2 {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* CSS Code continues... */

Answer 3

Answer №2

Creating a triangle without specifying width and height.

.triangle1 {
    border-right: 30px solid transparent;
   border-bottom: 30px solid #4c4c4c; 
   position: fixed;
}

View Working Example

For the image provided, I have created two inverted triangles.

.triangle1 {
    border-right: 100px solid transparent;
    border-bottom: 100px solid #4c4c4c; 
    position: fixed;
}
.triangle2 {
    border-left: 100px solid transparent;
    border-top: 100px solid #4c4c4c; 
    position: fixed;
    margin-left: 3px;
}

<div class="triangle1">
</div>

<div class="triangle2">
</div>

Edit:

Adding text inside the triangle can be achieved by inserting another div with text and positioning it accordingly.

See Updated Fiddle

Answer 4

Creating a triangle without specifying width and height.

.triangle1 {
    border-right: 30px solid transparent;
   border-bottom: 30px solid #4c4c4c; 
   position: fixed;
}

View Working Example

For the image provided, I have created two inverted triangles.

.triangle1 {
    border-right: 100px solid transparent;
    border-bottom: 100px solid #4c4c4c; 
    position: fixed;
}
.triangle2 {
    border-left: 100px solid transparent;
    border-top: 100px solid #4c4c4c; 
    position: fixed;
    margin-left: 3px;
}

<div class="triangle1">
</div>

<div class="triangle2">
</div>

Edit:

Adding text inside the triangle can be achieved by inserting another div with text and positioning it accordingly.

See Updated Fiddle

Answer 5

Answer №3

.triangle2 {
    width: 0; 
    height: 0; 
    border-left: 0px solid transparent;
    border-right: 200px solid transparent;
    border-bottom: 150px solid black;
}

When it comes to DIV Element 1, create a triangle shape using CSS properties for the top of a square element positioned below it.

Answer 6

.triangle2 {
    width: 0; 
    height: 0; 
    border-left: 0px solid transparent;
    border-right: 200px solid transparent;
    border-bottom: 150px solid black;
}

When it comes to DIV Element 1, create a triangle shape using CSS properties for the top of a square element positioned below it.

Answer 7

Answer №4

Sample HTML code :

<div id="Triangle-1"></div>
<div id="Triangle-2"></div>

Custom CSS :

#Triangle-1 { width: 0; height: 0; border-bottom: 100px solid black; border-right: 100px solid transparent; }
#Triangle-2 { width: 0; height: 0; margin-left: 15px;border-top: 100px solid black; border-left: 100px solid transparent; }

You can modify the size and shape of your triangles by adjusting the border properties.

Feel free to experiment with this code!

Answer 8

Sample HTML code :

<div id="Triangle-1"></div>
<div id="Triangle-2"></div>

Custom CSS :

#Triangle-1 { width: 0; height: 0; border-bottom: 100px solid black; border-right: 100px solid transparent; }
#Triangle-2 { width: 0; height: 0; margin-left: 15px;border-top: 100px solid black; border-left: 100px solid transparent; }

You can modify the size and shape of your triangles by adjusting the border properties.

Feel free to experiment with this code!

Design a triangular shape using CSS only

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for customizing the back button in Ionic 3

Tips for stopping an image from stretching the cell in flexbox using CSS

Gatsby utilized the background-image CSS style within the Emotion library for CSS-in-JS implementation

The Android webview fails to load the page, but the app successfully loads it when accessed through the

When a user right-clicks on certain words, the menu opens using JavaScript

Optimizing CSS usage within Django: top recommendations

Retrieve data from an HTML table using PHP

Streaming live video on the website

Utilizing DataTables to dynamically populate a table with data fetched from an AJAX request

Previewing a PDF file with multiple headers displayed above the text content

The transparent background causes the vertical menu to malfunction on IE8

Attempting to achieve the effect where the entire row of a table changes color when the mouse hovers

Discover the steps to convert an image to base64 while circumventing the restrictions of the same-origin policy

Issues with jQuery Sliders

Tips for showing data from Ajax responses on an HTML page

Is it feasible to incorporate one iOS app within another iOS app through in-app purchasing or subscription?

Use the $.get() method in JavaScript to send a parameter to my controller function

AngularJS bidirectional binding with numerous select choices

In order to design a v-btn-toggle with vertically aligned buttons, rather than horizontally

Activate divs with Bootstrap5 modal toggle functionality