How to incorporate diagonal lines in CSS within its parent container?

Is there a way to create a diagonal line that fills in and fits perfectly into a box using just CSS, without the need for any background images?

div.diagonal-container {
    border: 1px solid #000;
    width:400px;
    height:400px;
    margin: 0 auto;
}

.to-right,
.to-left {
    border-top:1px solid #ff00ff;
    width:100%;

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

.to-right {
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
<div class="diagonal-container" style="">
    <div class="to-right"></div>
</div>

<div class="diagonal-container" style="">
    <div class="to-right"></div>
</div>

<div class="diagonal-container" style="">
    <div class="to-left"></div>
</div>

Outcome:

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

View the working example on jsfiddle.

Addtionally, is it feasible to have an element exist on its own without wrapping it in a container? For example:

<div class="to-right"></div>
<div class="to-right"></div>
<div class="to-left"></div>

Would this be achievable?

htmlcsscss-transformsdiagonal

Answer №1

If you want to create a diagonal effect using linear-gradient for the background without adding an extra inner element, simply apply the specified class to the div itself.

div.diagonal-container {
  border: 1px solid #000;
  width: 400px;
  height: 400px;
  margin: 0 auto;
}

.to-right {
  background: linear-gradient(135deg, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px) );
}

.to-left {
  background: linear-gradient(45deg, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px) );
}
<div class="diagonal-container to-right"></div>

<div class="diagonal-container to-right"></div>

<div class="diagonal-container to-left"></div>

Answer №2

If you want to create diagonal lines, you can use pseudo elements.

.diagonal-container {
  border: 1px solid #000;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.diagonal-container:before {
  border-top: 1px solid #ff00ff;
  content: '';
  position: absolute;
  top: 0; left: 0; right: -50%;
  transform: rotate(45deg);
  transform-origin: 0 0;
}

.to-right:before {
  right: 0; left: -50%;
  transform: rotate(-45deg);
  transform-origin: 100% 0;
}
<div class="diagonal-container to-right">
</div>

<div class="diagonal-container to-left">
</div>

<div class="diagonal-container to-right">
</div>

Answer №3

My technique:

  1. To create the diagonal lines, I utilized position: relative for the container and position: absolute for the lines.
  2. The left line was styled with transform-origin: left, left: 0, while the right line had transform-origin: right and right: 0.
  3. If the container's width and height are equal, the line's width will approximate to ~141.5%.

.diagonal-container {
    border: 1px solid #000;
    width: 400px;
    height: 400px;
    margin: 0 auto;
    position: relative;
}

.to-right, .to-left {
    border-top: 1px solid #ff00ff;
    width: 141.5%;
    position: absolute;
    top: 0;
}

.to-left {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
    left: 0;
}

.to-right {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: right;
    -ms-transform-origin: right;
    transform-origin: right;
    right: 0;
}
<div class="diagonal-container">
    <div class="to-right"></div>
</div>

<div class="diagonal-container">
    <div class="to-right"></div>
</div>

<div class="diagonal-container">
    <div class="to-left"></div>
</div>

In case you prefer a CSS preprocessor like LESS, here is an example of how it can be implemented:

@width: 400px;
@height: 400px;

.rotate(@angle, @origin) {
    -webkit-transform: rotate(@angle);
    -ms-transform: rotate(@angle);
    transform: rotate(@angle);
    -webkit-transform-origin: @origin;
    -ms-transform-origin: @origin;
    transform-origin: @origin;
}

.diagonal-container {
    border: 1px solid #000;
    width: @width;
    height: @width;
    margin: 0 auto;
    position: relative;
}

.to-right, .to-left {
    border-top: 1px solid #ff00ff;
    width: sqrt(@width*@width + @height*@height);
    position: absolute;
    top: 0;
}

.to-left {
    .rotate(45deg, left);
    left: 0;
}

.to-right {
    .rotate(-45deg, right);
    right: 0;
}

CodePen

Answer №4

Consider using the following CSS for a diagonal container:

div.slanted-container {
  border: 1px solid #333;
  width: 450px;
  height: 450px;
  margin: 0 auto;
  overflow: hidden;
}

.to-bottom,
.to-top {
  border-top: 1px solid #00ff00;
  width: 100%;
}

.to-top {
    transform: rotate(30deg) scale(1.3);
    transform-origin: bottom left;
}

.to-bottom {
  transform: rotate(-30deg) scale(1.3);
  transform-origin: top right;
}

Answer №5

Using SVG is a better option as it provides responsive diagonal lines that work effectively on the majority of browsers.

.container {
    width: 30rem;
    height: 15rem;
    background-color: hsla(0, 0%, 70%, 0.3);
    cursor: pointer;
    position: relative;
}

.svg-line {
    position: absolute;
    width: 100%;
    height: 100%;
}
<div class="container">
    <svg class='svg-line' viewBox='0 0 10 10' preserveAspectRatio='none'>
         <line x1='10' y1='0' x2='0' y2='10' stroke='red' stroke-width='.2' stroke-opacity='0.2' />
    </svg>
</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

Guide to making control bar fade out when video is paused on video.js

Is there a way for the control bar to automatically disappear when the video is paused? Thank you in advance! ...

javascriptcsscontrolsvideo.js

Determine if an option is chosen in multiple select elements using Vanilla JavaScript

In order to determine if a checkbox is checked, we use the following code: let isChecked = event.target.checked But what about multiple select options like the example below? <select name="books[]" multiple> <option value="A">A</option& ...

javascripthtmlhtml-selectdom-eventsmultiple-select

Displaying a MySQL blob image in an HTML file with Vue.js: A step-by-step guide

Here is a Vue file that I have: export default { data(){ return{ info: { name: '', image: '', }, errors: [] } }, created: function(){ thi ...

javascripthtmlmysqlvue.jsblob

Could the reason behind the malfunctioning of the bootstrap tabs be due to my CSS files?

I'm looking to implement Bootstrap tabs in the sidebar of my website, but I'm running into an issue where the tabs aren't functioning properly within the sidebar-parsel-liste class. If I place the tab tags outside of this class, everything w ...

htmlcsstabsbootstrap-5sidebar

What are the best techniques for showcasing rich text content in vue.js?

I'm working on a web application and attempting to showcase uploaded rich text content using vue.js. The content is generated by Action Text in the following format. <h1>text</h1><div>sample text<br><action-text-attachment ...

javascripthtmlvue.jsactiontext

Retrieve the href attribute from a hyperlink positioned above a different element using Selenium

My challenge in using selenium is to extract an href from a link buried within numerous tags! The only identifiable detail I can work with is the presence of the text "Test text!" in the h3 tag as shown in the example below: <a href="/li ...

pythonhtmlseleniumselenium-chromedriver

How can one import files from an external CSS template in CakePHP 2.x?

I recently acquired an external HTML template that I purchased from a website called themeforest: https://i.sstatic.net/UIu6g.png The folder structure is as follows: base/ - css/ - fonts/ - images/ - img/ - js/ - index.html The template file Index.html ...

htmlcsstemplatescakephp

Update cursor when hovering over a button

What can I do to make the cursor change to a hand when hovering over my submit button? Currently, the cursor remains as the standard arrow and does not switch when placed on the button. The code for my button is: <button>Submit</button> ...

htmlbutton

Tips for creating a more condensed materialized table with form elements

Currently, I am working on a timesheet table using Materialize CSS with form elements in cells. However, I find the height of the table rows to be too large for my liking. Is there any way to make the table more compact? If this is a limitation of Materi ...

htmlcssformsmaterialize

XSLT selecting the remaining elements in a tokenized array

In my XSL document, I have a requirement to generate a hyperlink with text that includes a line break, resulting in two separate sentences. To achieve this, I am utilizing the tokenize function to split words based on whitespace character. <xsl:variab ...

htmlxmltemplatesxslttoken

Python code to locate images within HTML source code

Searching for images in an html source code can be tricky. I prefer using regex over the html.parser method, but I'm open to learning if you can explain it simply like you would to a child. I wish I could use beautifulsoup, but mastering the hard way ...

pythonhtmlregexpython-3.x

Click on every sublist within the unordered list items

In this coding example, there are multiple ul and li elements. Upon running the code, you will observe that test1 is positioned 10px from the left as it is nested within TEster, but achieving an additional 10px offset for Tester2 appears to be a challenge ...

htmlcss

I am interested in using a loop in Angular to highlight my div element

Enhancing my comprehension regarding the mentioned images. If I don't select anything within the div property, the default style (css) should appear like this, at least when one div is selected. However, the issue arises when unable to select. This ...

javascripthtmlcssangulartypescript

Updating a specific row in a table using PHP and SQL

I am having an issue with updating rows in a table that pulls information from a database. Each row has an input tag labeled COMPLETE, which the user can click on to update the database by changing a boolean field from 0 to 1. However, I am facing a prob ...

phphtmlmysql

JavaScript can sometimes present peculiar challenges when it comes to setting style attributes, especially when a DOCTYPE is

It seems like I am encountering an issue when trying to dynamically create and modify a <div> element using JavaScript. The problem arises when I use the XHTML 1 Transitional doctype. This is how I am generating the <div>: var newDiv = docume ...

javascripthtmlcssdoctype

firefox is experiencing lag issues with react-spring and framer-motion

Encountering an issue with two animation libraries, react-spring and framer-motion. Attempting to create a basic animation that triggers upon the component's initial visibility (simplified version). <motion.div initial={{x: -25, opacity: 0}} anima ...

cssreactjsanimationreact-springframer-motion

Tips for updating the value of the most recently created div in an ng-repeat loop

Within my HTML document, the following code is present: <div ng-repeat="selection in selections" style="margin-left:{{marginLeft}}%;width:{{progress}}%;background-color:{{selection}}"> </div> In my controller, I have implemented function ...

htmlcssangularjsangularjs-ng-repeat

The "Read more" feature is not functional on mobile devices

I am encountering issues with my Wordpress blog on mobile screens. The "read more" button is not functioning, and the screen size does not fit properly on mobile devices. Visit abood250.com for more information. CSS Styling: /* =Global ----------------- ...

javascriptjqueryhtmlcsswordpress

NextJS's conversion of HTML to image is malfunctioning, resulting in the download of the identical reference

Having encountered difficulties with the html-to-image library while working on a Next.js project, I used the following code to convert images: import Image from "next/image"; import {toPng} from 'html-to-image' const divReferenceA = u ...

javascripthtmlnext.js

Hover effect not displaying upon mouse exit

I am working on a feature where a series of images change when hovered over, with a div animating as an overlay on the image. Here is the code snippet: // hiding overlays initially $(".mini-shop .item .image a div").hide(); // toggling overlay and second ...

javascriptjqueryhtmlcss