如何在css中使用transform属性来获取边界线答案

【问题标题】：How to use transform property in css to get border line如何在css中使用transform属性来获取边界线
【发布时间】：2021-12-02 20:59:41
【问题描述】：

需求图片

我的头像

一旦查看这 2 张图片，需求图片就是我需要的，我的图片就是我得到的输出代码并帮助我解决 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>

【问题讨论】：

标签： javascript html css angular

【解决方案1】：

为了完整起见，另一种更适合响应需求（移动设备、台式机、平板电脑等）的替代方法是创建一个形状类似于您需要，然后将该多边形连同 SVG 图标一起插入到 flex 容器中。在我看来，这似乎是一个更清洁的解决方案。您可以使用此网站创建 CSS 多边形：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>

【讨论】：

喜边框蓝线丢失请在代码中添加它对我很有帮助
为div添加了边框；如果对您有帮助，请随时将此答案标记为已接受。

【解决方案2】：

你去... 这是我制作的完整解决方案，只需将名为“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>

【讨论】：

您好，感谢您的解决方案，这里有一个问题，请您按照要求图片多填充一点蓝色阴影
@RevanthReddySince1998 这是使用颜色选择器的确切十六进制颜色：#5D79FC
如果我的解决方案对您有帮助，请点赞。

【解决方案3】：

.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>

【讨论】：

您可能希望为该图标使用 SVG 格式。
您可以将两个答案放在一个答案中

【解决方案4】：

您可以使用 css 剪辑路径来获得您想要的形状编号：https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path 使用这个工具来匹配你需要的路径 - https://bennettfeely.com/clippy/

【讨论】：

这不是 OP 要求的；他想在已经拥有的容器形状的一侧放置一个图标。
这就是这个答案试图传达的内容，您在上面的答案中使用了clippy @avia
@Rana 是的，但我的回答提供了一个完整的工作代码解决方案，你的没有。这里的重点是完全解决解决方案，或者我猜尽可能多地解决。