What is the proper technique for designing a line with the right corner curvature?

In my react-redux application, I encountered an issue where I needed to display a quote-style line next to certain text. Using the CSS border property gave me this result.

https://i.sstatic.net/4zt3n.png

However, I would prefer the line to have rounded corners, like in this image:

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

Here is the CSS and HTML code I am currently using:

.post-quote-layout{
    margin-top: 16px;
    background-color: white;
    border-left: #6D45FC solid 6px;
    height: 100%;

}

.post-quote-text{
    font-size: 17px;
    background-color:white;
    margin-left: 10px;
    line-height:26px;
}
<div key={index} className="post-quote-layout">
     <div className="post-quote-line">
        <p className="post-quote-text" dangerouslySetInnerHTML={{__html:item?.text}} />
     </div>
</div>

I am looking for a way to make the line responsive as the content increases. How can I achieve this desired result?

htmlcssreactjsflexbox

Answer №1

Here is a method using a pseudo-element positioned absolutely

div {
  width: 50vw;
  margin: auto;
  position: relative;
  padding-left: 10px;
}

div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: rebeccapurple;
  border-radius: 3px
}
<div>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa sequi mollitia assumenda repudiandae impedit quidem, ducimus adipisci a ullam tenetur minus minima molestias provident recusandae non amet sapiente nihil ad, commodi ut optio veniam illo
    qui! Enim, neque odit? Laboriosam quasi aperiam, molestiae culpa ipsum corrupti animi praesentium atque exercitationem.</p>
</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

What is the best way to utilize an "as" property in TypeScript when forwarding props to a component?

I am currently working on creating a collection of components, and I require some of them to have the option of a customizable tag name. For instance, there are times when what seems like a <button> is actually an <a>. Therefore, I would like t ...

javascriptreactjstypescript

Leveraging nested objects within React state

A React child cannot be an object. If you intended to render a collection of children, utilize an array Encountering the error mentioned above has left me puzzled regarding its restrictions. Below is the code where I am facing this issue. It includes an o ...

javascriptreactjs

Every time I attempt to set up a schema in next.js, an error message is displayed

Each time I attempt to set up a yup schema in next.js, I encounter the following error message. import * as Yup from "yup"; const experienceSchema = Yup.object.shape({ experience: Yup.string().required(), }) The error message I am receiving is ...

reactjsnext.jswebpack-dev-serveryup

Automatically add a table row at the bottom displaying the overall calculation

I have data to display in an HTML table. The data is coming from a third-party server (PHP) using AJAX requests. The data is currently being displayed effectively with the following code: <table id="tbl-product"> <tr> < ...

jqueryhtmlajax

Ajax unable to update automatically

I'm currently in the process of setting up a registration box for new account creation. I'm attempting to load an HTML form through AJAX and pass data to a PHP file. My goal is to have the div containing the form reload every time the "register" ...

phpjqueryhtmlajax

Steps for dynamically adding a link to images in React with TypeScript based on a condition

In my project, I am looking to dynamically add links to images based on certain conditions using JavaScript and React. Here's what I aim to achieve: I have separate mobile and desktop images in my application. Under the mobile image, there is a text ...

reactjstypescript

The navigation bar is failing to redirect to another page upon clicking in Bootstrap 5

The problem arises when attempting to navigate with the navbar item, as it fails to redirect to the intended page and provides no feedback. However, upon removing the bootstrap.bundle.min.js, the redirect feature operates as expected. Nonetheless, the coll ...

htmltwitter-bootstrapbootstrap-5

Enhancing HTML5 Video Subtitle Presentation

Have you ever wondered if styling an HTML5 video player subtitle track element is possible? My goal is to reposition the subtitles outside of the media player. I attempted to style both the media player and the track element using CSS, but unfortunately, ...

javascripthtmlwebvtt

I am looking to switch the input border-bottom color to blue when the input field is focused or has valid content

Can someone help me change the border bottom color of my input to blue in the following HTML code: .inputBox input:focus ~ input, .inputBox input:valid ~ input{ border-bottom: 1px solid #0000cd; } <div class="i ...

htmlcss

Show information stored in Angularjs2 file (.ts) within an HTML document

Here is the code snippet from my .ts file: constructor( private config : ConfigService, private http: Http){ this.getWS('ngoName') .do((data) => { console.log(data); this.saveObj(data); }).to ...

javascripthtmlangularwebtypescript

While designing a dropdown menu, I am focusing on placing it at the top of the page, in alignment with the current URL

While creating a select menu, I need to ensure that the option corresponding to the current URL is set as selected. Here's an example: <select > <option value="http://www.test.com/teste1" selected>test1</option> <option value ...

phpjqueryhtml

How can I dynamically adjust the height of a Material-UI dropdown menu?

I have developed a unique custom popover design to create an extensive menu using Material-UI within my React project. The design specifications are as follows: root: { marginTop: theme.spacing(1.5), [theme.breakpoints.down('sm')]: { ...

reactjsdrop-down-menumaterial-ui

Specification for dynamically changing CSS in Bootstrap tooltips

The default tooltip template in Bootstrap is a black box with white text. However, it is possible to modify the .tooltip css class to have a white background instead: .tooltip{position:absolute;display:none;color:#333;text-align:left;font-size:0.9em;width ...

javascriptcssangularjstwitter-bootstrap

How to toggle the display of a div by its id using index in Javascript

Currently, I am encountering a problem with toggling the div containers. When I click on the video button, I want the other divs to close if they are already open. However, due to the toggling mechanism, if a div is closed and I click on the corresponding ...

javascripthtmlangular

Retrieve the value of a cell from a constantly changing HTML table based on the information found in the top row

My HTML table has columns that may change order. Below is the code for the table: <table id="table"> <tr> <td>ID</td> <td>Place</td> <td>Population</td> & ...

javascriptjqueryhtml

Ineffectiveness of Less Guard feature

I have a mixin with a guard clause that I've implemented following the provided guidelines. According to the syntax below, @palette should be selected from a list of custom colors and @color should be assigned a value from a specific set. The curren ...

cssless

Tips for maintaining the height of the outer div consistent with that of the inner div

I am encountering an issue with an inner div that is used for overlay and set to a min-height property. Despite changes in the overlay's height, the height of the outer div remains unaffected. #outer { width: 70px; height: 70px; background-co ...

htmlcss

Adding the location of the onClick event to the hook - a step-by-step guide

Here is the code I am working with: import { MapContainer, TileLayer } from "react-leaflet"; import React, { useState } from 'react'; export default function App() { const [positionLat, setPositionLat] = useState(null); ...

javascriptreactjsreact-leaflet

What are the consequences of condensing "this.setState" methods into one line?

I am wondering if it is considered good or bad practice to have this.setState on a single line of code, particularly when only one state variable is being modified. this.setState({ fruits: { apples: newApples, bananas: newBananas } }); vs this ...

reactjs

What is the best way to arrange three photos in columns of four each below one image spanning across all twelve columns?

Struggling with the bootstrap 5 grid? I'm trying to showcase one full image with a col-12 and 600px width, along with three images, each 200px wide with a col-4. The goal is to have one image on top and three beneath it with g-3 spacing between them. ...

cssgridbootstrap-5image-gallery