如何在css中使用transform屬性來獲取邊框線-有解無憂

需求圖

如何在css中使用transform屬性來獲取邊框線

我的形象

如何在css中使用transform屬性來獲取邊框線

一旦查看這 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>

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

另一種選擇，為了完整起見，不使用您的起始源代碼，更適合回應需求（移動、桌面、平板電腦等）的方法是簡單地創建一個形狀像您需要的藍色多邊形，并將該多邊形與 SVG 圖示一起插入到 flex 容器中。在我看來，這更像是一個更清潔的解決方案。你可以使用這個網站來創建 CSS 多邊形：https : //bennettfeely.com/clippy/

div {
  display:flex;
  width:400px;
  justify-content:space-between;
  height:85px;
}

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>

uj5u.com熱心網友回復：

你去......這是我制作的完整解決方案，只需替換名為'icon'所需圖示的類中的跨度內容

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

uj5u.com熱心網友回復：

您可以使用 css 剪輯路徑來獲取您想要的形狀 REF：https : //developer.mozilla.org/en-US/docs/Web/CSS/clip-path 使用此工具來匹配您需要的路徑 - https:/ /bennettfeely.com/clippy/

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/335863.html

標籤：javascript html css 有角的边框布局

上一篇：如何僅使用Scss將display:block更改為display:none？

下一篇：手風琴選單下拉選單僅適用于第一個下拉選單