Adding a simulated bottom border to a rotated container

Question

Adding a simulated bottom border to a rotated container

Currently, I am utilizing the CSS3 rotate value to create an arrowhead effect for modal boxes. However, I now require a full arrowhead design with a bottom border. As this involves rotating a div at a 45° angle, adding another border to either side will not provide the desired solution.

Initially, my plan was to style the :after pseudo selector of the div and vertically center it. Unfortunately, it seems to be inheriting the rotation value. Despite attempting to set the value to none and manually adjust the rotation angle, I have been unable to achieve the desired straight horizontal border reset. Any suggestions on how to accomplish this?

Following Harry's recommendation, I adjusted the angle of the :after selector to -45deg and set the top value to 50%. The only remaining issue is that it does not fully extend to the left and right sides of the div. Are there any solutions for this problem?

.arrow {
  background-color: transparent;
  border-top: 2px solid #c7c7c7;
  border-left: 2px solid #c7c7c7;
  position: relative;
  height: 18px;
  width: 18px;

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

.arrow:after {
  content: "";
  background: #c7c7c7;
  display: inline-block;
  position: absolute;
  top: 50%;
  height: 2px;
  width: 100%;
  
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

<div class="arrow"></div>

html css css-shapes

Answer 1

Answer №1

Creating Arrowhead Using Different Methods:

If you want to design a full arrowhead with a bottom border, there are several methods you can use. One way is by utilizing CSS Transforms where the arrowhead is formed using the :after element and the bottom line is created in the parent container. This method ensures that the shape adjusts itself to various dimensions without the need for manual adjustments.

.arrow {
  position: relative;
  height: 25px;
  width: 25px;
  border-bottom: 2px solid #c7c7c7;
}
.arrow:after {
  position: absolute;
  content: "";
  bottom: -1px;  
  left: -2px; 
  height: calc(100% / 1.414); 
  width: calc(100% / 1.414);
  border-top: 2px solid #c7c7c7;
  border-left: 2px solid #c7c7c7;
  transform-origin: left bottom;
  transform: rotate(45deg);
}

/* Just for demo */
.arrow { transition: all 1s; }
.arrow:hover { height: 50px; width: 50px; }

<div class="arrow"></div>

An Alternative Approach Using SVG:

Another method worth exploring is using SVG which simplifies the process of creating shapes like arrowheads. By defining coordinates within the "path" element, we can easily create the desired shape. The M command moves the pen and the L command connects the points to form lines.

svg {
  width: 25px;
  height: 18px;
}
path {
  stroke: #c7c7c7;
  stroke-width: 2;
  fill: transparent;
}

/* Just for demo */
svg{ transition: all 1s; }
svg:hover{ width: 50px; height: 36px; }

<svg viewBox='0 0 50 50' preserveAspectRatio='none'>
  <path id='arrowhead' d='M0,48 L25,2 50,48z' vector-effect='non-scaling-stroke'/>
</svg>

Using Gradients for Creating Arrowheads:

One more approach involves using linear-gradient to achieve the arrowhead effect. This method requires only a single element but may have limited browser support and is best suited for fixed-size containers. However, it may not be ideal for responsive designs as the bottom border thickness changes with container dimensions.

.arrow {
  position: relative;
  height: 18px;
  width: 18px;
  border-top: 2px solid #c7c7c7;
  border-left: 2px solid #c7c7c7;
  background: linear-gradient(to left top, transparent 50%, #c7c7c7 50%, #c7c7c7 60%, transparent 60%);
  transform: rotate(45deg);
}

/* Just for demo */
.arrow { transition: all 1s; }
.arrow:hover { height: 50px; width: 50px; }

<div class="arrow"></div>

Answer 2

Creating Arrowhead Using Different Methods:

If you want to design a full arrowhead with a bottom border, there are several methods you can use. One way is by utilizing CSS Transforms where the arrowhead is formed using the :after element and the bottom line is created in the parent container. This method ensures that the shape adjusts itself to various dimensions without the need for manual adjustments.

.arrow {
  position: relative;
  height: 25px;
  width: 25px;
  border-bottom: 2px solid #c7c7c7;
}
.arrow:after {
  position: absolute;
  content: "";
  bottom: -1px;  
  left: -2px; 
  height: calc(100% / 1.414); 
  width: calc(100% / 1.414);
  border-top: 2px solid #c7c7c7;
  border-left: 2px solid #c7c7c7;
  transform-origin: left bottom;
  transform: rotate(45deg);
}

/* Just for demo */
.arrow { transition: all 1s; }
.arrow:hover { height: 50px; width: 50px; }

<div class="arrow"></div>

An Alternative Approach Using SVG:

Another method worth exploring is using SVG which simplifies the process of creating shapes like arrowheads. By defining coordinates within the "path" element, we can easily create the desired shape. The M command moves the pen and the L command connects the points to form lines.

svg {
  width: 25px;
  height: 18px;
}
path {
  stroke: #c7c7c7;
  stroke-width: 2;
  fill: transparent;
}

/* Just for demo */
svg{ transition: all 1s; }
svg:hover{ width: 50px; height: 36px; }

<svg viewBox='0 0 50 50' preserveAspectRatio='none'>
  <path id='arrowhead' d='M0,48 L25,2 50,48z' vector-effect='non-scaling-stroke'/>
</svg>

Using Gradients for Creating Arrowheads:

One more approach involves using linear-gradient to achieve the arrowhead effect. This method requires only a single element but may have limited browser support and is best suited for fixed-size containers. However, it may not be ideal for responsive designs as the bottom border thickness changes with container dimensions.

.arrow {
  position: relative;
  height: 18px;
  width: 18px;
  border-top: 2px solid #c7c7c7;
  border-left: 2px solid #c7c7c7;
  background: linear-gradient(to left top, transparent 50%, #c7c7c7 50%, #c7c7c7 60%, transparent 60%);
  transform: rotate(45deg);
}

/* Just for demo */
.arrow { transition: all 1s; }
.arrow:hover { height: 50px; width: 50px; }

<div class="arrow"></div>

Adding a simulated bottom border to a rotated container

Answer №1

Similar questions

Invisible anchor rows in GWT's UIBinder grid view

What is the best way to confirm checkbox selection based on MySQL data?

Looking to target an element using a cssSelector. What is the best way to achieve this?

Troubleshooting Problem with Responsive Bootstrap Navbar

Calculating square roots in AngularJS

Changing the Color Scheme of Twitter BootstrapRevamping the Color Palette

"Encountered an error while trying to access properties that

I plan to add new information to my table only when the user clicks on the submit button. This is what I have accomplished until now

Achieve full height Bootstrap styling by nesting it inside a row div

Managing the width of an HTML table column based on its text content dynamically

What is the reason that object-fit does not affect the width or height?

Whenever I implement JavaScript validation on my HTML page, it causes the page to become un

Hiding the C3 tooltip after engaging with it

Is it necessary to have uniform spacing between links in a responsive navigation menu?

How can I change the background color of a parent div when hovering over a child element using JavaScript

Dynamically generated table causing issues with Jquery functionality

You can only import Next.js Global CSS from your Custom <App> and not from any other files

Display or conceal numerous WTForm labels

What's causing jQuery to make the entire page malfunction?

Eliminating the 'white-space' surrounding concealed images