Create CSS rules to draw lines that stretch to the edges of the container

Question

Create CSS rules to draw lines that stretch to the edges of the container

As a skilled developer with expertise in CSS and coding styling, I have encountered a new design that has been approved. I am currently working on achieving a specific look with drawing borders and lines that need to extend both left and down. Here is a screenshot of the design:

Click here to view the screenshot

Does anyone have any insights on how to accomplish this using HTML/CSS? This design will only be visible on desktop view, as it will be removed on tablet and mobile. I prefer not to use a flattened image, but that seems like the current path I am considering.

I have experimented with creating the lines as an image placed below the text on the left side, but I am open to alternative solutions.

css lines

Answer 1

Answer №1

Exploring the possibilities of CSS

body{
  background: black;
  margin: 0;
}
.div{
  position: relative;
  width: 80%;
  background: grey;
  display: table;
  margin-top: 50px;
}
.a,
.b{
  display: table-cell;
  color: white;
}
.a{
  text-align: right;
  font-size: 1.2em;
  padding: 15px;
  border-bottom: 2px solid white;
}
.b{
  width: 140px;
}
.b div{
  position: absolute;
  background: pink;
  font-size: 1em;
  bottom: 0;
  border: 2px solid white;
  padding: 8px;
}
strong{
  display: block;
  width: 150px;
  float: right;
}
.b div:before{
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: 50px;
  background: white;
  top: 100%;
  left: -2px;
}

<div class="div">
  <div class="a">UNLEASHING THE POWER OF <br><STRONG>CREATIVE CSS DESIGN</STRONG></div>
  <div class="b"><div>ELEVATE YOUR BRAND</div></div>
</div>

Answer 2

Exploring the possibilities of CSS

body{
  background: black;
  margin: 0;
}
.div{
  position: relative;
  width: 80%;
  background: grey;
  display: table;
  margin-top: 50px;
}
.a,
.b{
  display: table-cell;
  color: white;
}
.a{
  text-align: right;
  font-size: 1.2em;
  padding: 15px;
  border-bottom: 2px solid white;
}
.b{
  width: 140px;
}
.b div{
  position: absolute;
  background: pink;
  font-size: 1em;
  bottom: 0;
  border: 2px solid white;
  padding: 8px;
}
strong{
  display: block;
  width: 150px;
  float: right;
}
.b div:before{
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: 50px;
  background: white;
  top: 100%;
  left: -2px;
}

<div class="div">
  <div class="a">UNLEASHING THE POWER OF <br><STRONG>CREATIVE CSS DESIGN</STRONG></div>
  <div class="b"><div>ELEVATE YOUR BRAND</div></div>
</div>

Create CSS rules to draw lines that stretch to the edges of the container

Answer №1

Similar questions

The customary scroll bar located to the right side of the screen

What is the best way to extract a thumbnail image from a video that has been embedded

Distinguishing between these two hover text types: JQuery CSS, what sets them apart?

Implementing a color change for icons in React upon onClick event

The JScolor Color Picker has a slight misalignment

Adjusting table font dynamically using Angular and CSS

Creating a dynamic trio of graphs with HTML5, CSS3, and Vanilla JavaScript

Automatically transferring CSS class attributes to a newly created class

Exploration of search box with highlighted fields

Can one image impact other images through a wrapping function?

Looking for an iframe that can adapt to varying content sizes and scale seamlessly with different screen dimensions?

Use CSS bracket attribute to conceal link with no HTML access

I am in need of a JavaScript event that will take precedence over the CSS pointer

Gallery Pagination using JQuery is not working properly

Organizing the website's files and extensions

style the table cells based on results of winner values retrieved from JSON

Update the color of the angular material input text box to stand out

Alter the class of the div element every three seconds

Are You Able to Develop a Floating Window That Stays Persistent in JavaScript?

Carousel-item height in Bootstrap 4.6