Looking to Use Pseudo Elements to Create a Triangle

Looking to use pseudo elements to create a triangle

This will set the positioning and create a down pointing arrow. The numbers are custom and can be adjusted to change the size of the arrow and its position.

.overviews-list > li.active > ul.submenu > li.active {
  position: relative;
}

.overviews-list > li.active > ul.submenu > li.active:after {
  position: absolute;
  content: "";
  width: 0px;
  height: 0px;
  border-top: 15px solid white;
  border-right: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid transparent;
  top: 25%;
  right: 10px;
}

JS Fiddle

Html/Css Triangle with pseudo elements

The issue is with the use of border. you can check this link How do CSS triangles work? and you will understand how border works and why you get this output.

An alternative solution is to use rotation and border like this :

.box {  border: 1px solid;  margin: 50px;  height: 50px;  position:relative;  background: #f2f2f5;}
.box:before {  content: "";  position: absolute;  width: 20px;  height: 20px;  border-top: 1px solid;  border-left: 1px solid;  top: -11px;  left: 13px;  background: #f2f2f5;  transform: rotate(45deg);}

<div class="box">
</div>

using pseudo :after-element to create a triangle shape color overlay

You can consider a multiple background layer to achieve this:

html,body {  width: 100%;  height: 100%;  margin: 0;}
.bg-img {  height: 100%;  background-blend-mode: multiply;  background:     url("http://unsplash.it/1200x800") center/cover,    linear-gradient(rgba(41, 196, 169, 0.61),rgba(41, 196, 169, 0.61)) right/50% 100%,   linear-gradient(to bottom right,transparent 49.8%,rgba(41, 196, 169, 0.61) 50%) calc(50% - 50px) 0/100px 50.05%,   linear-gradient(to top right,   transparent 49.8%,rgba(41, 196, 169, 0.61) 50%) calc(50% - 50px) 100%/100px 50.05%;  background-repeat: no-repeat;}

<div class="bg-img"></div>

How to position a CSS triangle using ::after?

Just add position:relative to the parent element .sidebar-resources-categories

http://jsfiddle.net/matthewabrman/5msuY/

explanation: the ::after elements position is based off of it's parent, in your example you probably had a parent element of the .sidebar-res... which had a set height, therefore it rendered just below it. Adding position relative to the .sidebar-res... makes the after elements move to 100% of it's parent which now becomes the .sidebar-res... because it's position is set to relative. I'm not sure how to explain it but it's expected behaviour.

read more on the subject: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

CSS triangle :before element

You need to specify the content property.

For positioning, add position:relative to the parent, and then absolutely position the arrow -15px to the left.

jsFiddle example

.d {
    position:relative;
}

.d:before {
    content:"\A";
    border-style: solid;
    border-width: 10px 15px 10px 0;
    border-color: transparent #dd4397 transparent transparent;
    position: absolute;
    left: -15px;
}

Shadow for the shape(triangle) created with pseudo element

You can use a pseudo elemnt and skew.

Then dispatch shadows inside and outside to hide each other where needed :

DEMO

---

CSS

#a {
  background: turquoise ;
  margin:1em;
}
#b {
  background: tomato ;
  margin:1em auto;
}
#c {
  background: orange ;
  margin:1em 18%;
}
div {box-shadow:0 0 5px; width:80%;}
div:after {/* after so it comes last */
  content:'';
  display:block;
  height:1.4em;/* tune its-height */
  position:relative;/* to move a bit to hide box-shadow of div parent */
  top:5px;
  left:-10px;
  background:white;
  width:30%;/* tune its size */
  box-shadow:
    inset  18px  0 0 white,
    inset 0px -3px white,
    inset 0 0 3px   black;
  transform:skew(45deg);
}

---

HTML base :

<div id="a">a <br/><!--demo behavior purpose--> A</div> 
<div id="b">b</div>   
<div id="c">c</div>

How can I create an triangle shape using css on the right side of the list group of bootstrap?

You can achieve that effect using CSS border on pseudo-elements. The original code was from https://css-tricks.com/the-shapes-of-css/

.list-group-item.active {
  position: relative;
}

.list-group-item.active:before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid #fff;
  border-bottom: 10px solid transparent;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Assigment 6 Part2</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="assignment6.css">
  <script src="
    https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
  </script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@200&display=swap" rel="stylesheet">
</head>

<body>

  <div class="row">
    <div class="col-4 col-md-4 col-lg-5">
      <ul class="list-group list-group-flush" id="list-tab" role="tablist">
        <li class="list-group-item text-lg-end active" id="list-home-list" role="tab" data-bs-toggle="list" href="#list-home" aria-controls="list-home"><i class="fas fa-couch"></i>   Master Bedrooms</li>
        <li class="list-group-item text-lg-end  " id="list-profile-list" role="tab" data-bs-toggle="list" href="#list-profile"><i class="fas fa-utensils"></i>   Breakfast Buffet</li>
        <li class="list-group-item text-lg-end " id="list-home-list" role="tab" data-bs-toggle="list" href="#list-messages">Fitness Center</li>
        <li class="list-group-item text-lg-end " id="list-home-list" role="tab" data-bs-toggle="list" href="#list-settings">24 hours Reception</li>
        <li class="list-group-item text-lg-end " role="tab" id="list-home-list" data-bs-toggle="list" href="#list-home">Pool & Spa </li>
        <li class="list-group-item text-lg-end " role="tab" id="list-home-list" data-bs-toggle="list" href="#list-home">Free Wifi</li>
        <li class="list-group-item text-lg-end " role="tab" id="list-home-list" data-bs-toggle="list" href="#list-home">Resto bar</li>
      </ul>
    </div>
    <div class="col-8 col-md-6 col-lg-6">
      <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
          <h2>Master Bedrooms</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt voluptate, quibusdam sunt iste dolores consequatur</p>
          <p>Inventore fugit error iure nisi reiciendis fugiat illo pariatur quam sequi quod iusto facilis officiis nobis sit quis molestias asperiores rem, blanditiis! Commodi exercitationem vitae deserunt qui nihil ea, tempore et quam natus quaerat doloremque.
          </p>
        </div>
        <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">h2</div>
        <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">h3</div>
        <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">h4</div>
      </div>
    </div>
  </div>

How to make a curved triangle speech bubble with pseudo-elements?

you could use pseudo elements (and their trickery) to generate something similar to this:

---

div {  height: 200px;  width: 350px;  background: tomato;  margin: 50px;  position: relative;  display: inline-block;}div:before {  content: "";  position: absolute;  height: 40px;  width: 40px;  background: tomato;  bottom: 2%;  left: -15px;  border-radius: 0 0 100% 0;  -webkit-transform: rotate(35deg);  transform: rotate(35deg);}div:after {  content: "";  position: absolute;  height: 40px;  width: 10px;  background: white;  bottom: 7%;  left: -18px;  border-radius: 50%;  -webkit-transform: rotate(35deg);  transform: rotate(35deg);}

<div>Hello world</div>

Horozontally center a pseudo element (formed as a triangle)

Consider using the following CSS. I'm using left to move the item so that it's left edge is at the center-point and margin:0 0 0 -32px to move the element left 32px (half of its width).

h2:after{
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
    border-top: 24px solid #097fc2;
    content: "";
    display: block;
    height: 0;
    left: 50%;           /* Changed this */
    /* margin: auto;        Removed This */
    margin: 0 0 0 -32px; /* Added this */
    position: absolute;
    text-align: center;
    top: 53px;
    width: 0;
    z-index: 1;
}

.vc_custom_1414444458431 {    margin-bottom: 0px !important;    background-color: #097fc2 !important;}h2:after {    border-left: 32px solid transparent;    border-right: 32px solid transparent;    border-top: 24px solid #097fc2;    content:"";    display: block;    height: 0;    left: 50%;    /* Changed this */    /* margin: auto;        Removed This */    margin: 0 0 0 -32px;    /* Added this */    position: absolute;    text-align: center;    top: 53px;    width: 0;    z-index: 1;}

<div class="vc_row wpb_row vc_inner vc_row-fluid vc_custom_1414444458431">    <div class="vc_col-sm-12 wpb_column vc_column_container">        <div class="wpb_wrapper">            <div class="wpb_text_column wpb_content_element  procedures-title">                <div class="wpb_wrapper">                     <h2 style="text-align: center;">PROCEDURES</h2>
                </div>            </div>        </div>    </div></div>

---

Related Topics