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

I have noticed that the SVG viewBox appears different when using Vue.js

Using Jquery to toggle columns based on their index and custom attribute

Tips for perfectly centering a SPAN element within a DIV both vertically and horizontally

Unveiling the search bar as it expands horizontally from the center, causing the submit button to slide to adjust

Issue with React router not functioning correctly when dealing with dynamically created anchor tags utilizing jquery

CSS grid tracks remain fixed in size while other tracks expand

Tips for creating a full screen div layout with fixed top and bottom navigation bars

Unable to fetch local file using ajax from a local HTML page

Is there a way to transform an HTML table into an Excel file with several sheets?

I'm curious as to why styled components weren't working before

Use Jquery to modify the value of a data attribute when a key is released

There seems to be an error with JVectorMap: the <g> attribute transform is expecting a number but is instead receiving "scale(NaN) translate(N..."

Having trouble with the functionality of JQuery drop feature?

When using jQuery, adding a class does not always trigger CSS animation

What is the best way to retain selection while clicking on another item using jQuery?

Change an ASP page into an image format such as JPEG or PNG

Successful PHP submission confirmation

The Ajax/jQuery output is not showing up in the iframe, but is instead appearing on a separate page

What steps should I take to fix an error in my code?

Are there any available tools or scripting methods for accommodating various vendor prefixes?