0
183
ViewsHow to use transform property in css to get border line
Requirement 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>3 answers
Answer question0
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>0
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>0
.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>