CODEWITHSUNDEEP
javascripthtmlcssangular
RevanthReddySince1998
RevanthReddySince1998

Reputation: 43

How to use transform property in css to get border line

Requirement image

Requirement image

My image

My image

Once look at these 2 images requirement image is what I need and My image is what I got the output I need the output like requirement image how to get that border blue line and icon as shown in the requirement image please check the below code and help me with the solution in stackblitz

.psudo:after{
  content:"";
    position:absolute;
    border-width:92px;
    border-style:solid;
    border-color:#fff;
    border-right-color:transparent;
    border-left-color:transparent;
    border-bottom-color:transparent;
    z-index:99;
    top:0;
    right:0;
    transform:translateX(90px)
}
<div class="psudo" style="width:300px; height:80px; position:relative; background-color:#5f7dff;">
      <h6 class="name">Customer</h6>
 </div>

Upvotes: 0

Views: 236

Answers (3)

Junaid Shaikh
Junaid Shaikh

Reputation: 1143

there you go... here is the complete solution I made, just replace the span content inside class named 'icon' with your desired icon.

https://stackblitz.com/edit/web-platform-kgeqeh?file=index.html

<!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>Document</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    .box {
      /* width: 40%; */
      border: 1px solid #5f7dff;
      overflow: hidden;
      width: 300px;
      height: 80px;
      display: flex;
      justify-content: space-between;
    }
    
    .customer {
      align-items: center;
      background-color: #5f7dff;
      display: inline-flex;
      position: relative;
      padding: 0 20px;
    }
    
    .customer::after {
      content: '';
      position: absolute;
      right: -80px;
      top: 0;
      width: 0;
      height: 0;
      border-bottom: 116px solid #5f7dff;
      border-right: 80px solid transparent;
    }
    
    .icon {
      display: flex;
      align-items: center;
      padding-right: 20px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="customer">
      <span>Customer</span>
    </div>
    <div class="icon">
      <span>icon</span>
    </div>
  </div>
</body>

</html>

Upvotes: 1

avia
avia

Reputation: 1568

An alternative, and for the sake of completeness, without using your starting source code, that would be more suitable for responsive needs (mobile, desktop, tablet, etc.) would be to simply create a blue polygon shaped like the one you need, and insert that polygon inside a flex container altogether with the SVG icon. That seems to me like a cleaner solution. You can use this website to create CSS polygons: https://bennettfeely.com/clippy/

div {
  display:flex;
  width:400px;
  justify-content:space-between;
  height:85px;
  border:1px solid #5D7AFC; /* you can add a border to the div element like this */
}

span {
clip-path: polygon(0 0, 59% 0, 100% 100%, 0% 100%);
background:#5D7AFC;
width:75%;height:100%;
color:#FFF;display:flex;align-items:center;justify-content:flex-start;

}

span > span {
margin-left:15%;
}

img {
width:75px;
}
<div>
  <span>
    <span>Customer</span>
  </span>
  <img src="https://laurentchevrette.digital/tmp/some-icon.png">
</div>

Upvotes: 1

avia
avia

Reputation: 1568

.container {
  display:flex; /*You can use flex positioning */
  width:330px; /*set desired total width here */
  justify-content:space-between;  
}

.container img {
  width:70px;height:70px;
  z-index:10;
  }

.pseudo {
    width:300px;
    height:80px;
    position:relative;
    background-color:#5f7dff;
}

.pseudo:after{
  content:"";
    position:absolute;
    border-width:92px;
    border-style:solid;
    border-color:#fff;
    border-right-color:transparent;
    border-left-color:transparent;
    border-bottom-color:transparent;
    z-index:9;
    top:0;
    right:0;
    transform:translateX(90px)
}
<div class="container"> <!-- insert the 'shape' and the icon (SVG,PNG,etc.) inside that same container -->
  <div class="pseudo">
        <h6 class="name">Customer</h6>
  </div>
  <img src="https://laurentchevrette.digital/tmp/some-icon.png">
</div>

Upvotes: 0

Related Questions