Personalize your hr tag

https://i.stack.imgur.com/9lumC.png

Is there a way to create an hr line that looks exactly like the image above? I attempted using 

clip-path: polygon(0 20%, 0 100%, 100% 100%, 100% 0%, 5% 0)
but it didn't work

.divider {
        color:#1D0000;
        display: flex;
        text-transform: uppercase;
        align-items: center;
        margin: 1em -1em;
    }
.divider:before,
.divider:after {
    content: "";
    flex: 1;
    border:1px solid #1D0000;
    margin: 0 1em;
    clip-path: polygon(0 20%, 0 100%, 100% 100%, 100% 0%, 5% 0)
}
<h2 class="divider">Testing</h2>

css

Answer №1

Have you considered using the transform: skew() property?

.section {
  color: #333333;
  display: flex;
  text-transform: uppercase;
  align-items: center;
  margin: 1em -1em;
}

.section::before,
.section::after {
  content: "";
  display: block;
  flex: 1;
  height: 4px;
  border-top: 1px solid #333333;
  margin: 0 1em;
}
.section::before {
  transform: skewX(45deg);
  border-right: 3px solid #333333;
}
.section::after {
  transform: skewX(-45deg);
  border-left: 3px solid #333333;
}
<h2 class="section">Product Listing</h2>

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

Use a text link to upload a file instead of using an input field

While I've seen some discussions on this topic already, the conflicting answers have left me uncertain. Is there a foolproof method for triggering file upload without using an input field? Essentially, I'd like to create a div with an icon and te ...

cssfile-uploadinput

Steps to dynamically reveal a table row within another row when clicked:

I have a table and I want to show the contents of another row inside the current row when the plus icon is clicked. I'm not sure which HTML element to use for this. Please help me figure it out. Thank you in advance. <div class="pro ...

javascripthtmlcssexpandcollapsable

Show the textbox automatically when the checkbox is selected, otherwise keep the textbox hidden

Is it possible to display a textbox in javascript when a checkbox is already checked onLoad? And then hide the textbox if the checkbox is not checked onLoad? ...

javascripthtmlcsstypescript

Bootstrap scrollspy feature experiencing malfunction

I am encountering an issue with scrollspy on Bootstrap version 5.1. Despite following the examples in the documentation (links provided below), I am unable to make it work; there are no visible changes when scrolling. My goal is for the corresponding link ...

htmlcssbootstrap-5scrollspy

Having difficulty navigating the website due to the inability to scroll

I am experiencing a problem on this website where I am unable to scroll. Visit www.Batan.io After loading the website for the first time, the trackpad (mac) works fine initially but then the scroll function stops working. Although the sidebar works, chan ...

htmlcssscroll

The process of making an image fill an entire div using Html and CSS

What is the best way to make an image fill an entire div using Html and CSS? ...

htmlcssmobile-website

Assign a "margin-bottom" value of "0" to all elements in the final row of a responsive layout

I'm currently working on a Bootstrap responsive template design where I have multiple items arranged in rows. The number of items per row and the number of rows vary depending on the screen resolution. <div class="row"> <div class="col-xs- ...

htmlcsstwitter-bootstrap

ReactStrap: If the dropdown list is too long, users may have trouble viewing the final values

Currently, I'm facing an issue with a dropdown list that is taking up the entire screen and hiding some items. Here's the code snippet for reference: const statusSearchDropDownValues = ( <Row className="align-items-center"> <Col c ...

cssreactjstwitter-bootstrapbootstrap-4reactstrap

What causes Bootstrap to cut off text in buttons?

My button text is getting truncated for some unknown reason. Here is the HTML code: <input class="btn btn-default" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit."/> And this is how it appears: I have tried setting the width in per ...

htmlcsstwitter-bootstrap

I am perplexed by the CSS property `height: auto;` which seems to be making the element taller than necessary. How exactly is

Currently, I am dealing with some HTML/CSS aspects of an already established WordPress website. It appears that there might be an issue related to the theme's CSS causing this problem, although it is not immediately apparent. Specifically, there is s ...

htmlcss

Lost in a sea of confusion with ember-cli-postcss and autoprefixer

I'm currently working on an ember build that incorporates autoprefixer. My issue arises from the fact that the output location for 'assets/application-name.css' has shifted from its normal path to 'app/styles/app.css', and I would ...

cssember.jsember-clipostcssautoprefixer

Tips for creating a responsive CSS "drawing"

I've created an "aquarium" using HTML and CSS, Now, I want to make the entire page responsive so that the elements shrink and grow based on the browser resolution. The first step is determining how the container should be structured. Is it acceptabl ...

htmlcssresponsive-designresponsive

What is the best way to extract text from multiple "div class" (html) elements in R?

My objective is to collect data from this html page in order to build a database: https://drive.google.com/folderview?id=0B0aGd85uKFDyOS1XTTc2QnNjRmc&usp=sharing One of the variables I am interested in is the price of the apartments. I have noticed th ...

htmlcssrregexrvest

CSS media query to center the logo on mobile screens

As someone new to CSS and media queries, I'm reaching out for help from the experts. My challenge involves positioning a mat-toolbar with a menu button and app logo. The HTML code in question is as follows: <div class="toolbar"> <mat-too ...

htmlcssresponsive-designmedia-queries

The Jqueryui image link is not displaying the image despite no error being reported

Can anyone help me figure out what I'm missing? I'm currently working with ASP.NET MVC 5 and have downloaded the JqueryUI combined via Nuget package. Despite no error references for css/js files, the close button is still not showing in the ima ...

javascriptjquerycssasp.net-mvcjquery-ui

Create a table within the B-Col element that automatically adjusts its size to match the column width using Vue-Bootstrap

Within my Vue component, I have the following code snippet: <b-modal ...> <b-row> <b-col sm="12"> <table > <tr v-for=... :key="key"> <td><strong>{{ key }}: </str ...

cssxmlvue.jsbootstrap-vue

The v-bind class feature is failing to update the CSS on the object's properties

I'm attempting to dynamically modify the CSS of certain buttons based on object properties within a list. Below is the data I am rendering out, and despite following the documentation and ensuring my setup is correct, I seem to be overlooking somethin ...

csslistvue.js

What might be causing Chrome to not wrap a centered column to the next line in Bootstrap 4 beta?

Utilizing bootstrap 4 beta, my goal is to center a line of text inside a column and ensure that if the text exceeds the line width, it wraps to the next line. I attempted to achieve this by using justify-content-center on the row in combination with col-a ...

htmlcsstwitter-bootstrapgoogle-chromebootstrap-4

Adjust the color of a label based on a set threshold in Chart.js

Can anyone help me with my Chart.js issue? Here is a link to the chart: I am trying to change the color of the horizontal label when it falls between 70.00 - 73.99. Does anyone know if there's a specific option for this in Chart.js? Thanks! ...

javascriptcssgraphchart.js

The image is failing to display in the CSS

As a beginner in the world of CSS and HTML, I encountered an issue where my background image is not showing up. Here's the code snippet that I have: ... <style type="text/css"> #header_contain{ width:935px; height: 135px; ...

htmlcss