嗨，我想在我的離子專案的左上方添加一個彩色的三角形曲線。我的離子專案包含一個影像和一個標簽。到目前為止，我已經能夠得到下面的樣式。當我試圖調整影像時，三角形曲線消失了。下面是我的HTML和CSS的代碼。
<ion-item no-lines>
<div id="triangle-topleft"></div>
<img src="{{item.img}}">
{{item.label}}
</ion-item>
.item{
padding: 8px;
// border-radius: 10px;
border-radius: 15px 50px 30px !important;
// border-radius: 15px 50px !important;
// border-radius: 15px 50px 30px 5px !"important;
text-align: center;
width: calc(50% - 5px);
float: left;
margin-bottom: 10px。
字體重量：500。
字體大小：1.4rem。
顏色：color($colors,primary);
高度：130px。
box-shadow: -5px 2px 5px rgba(0, 0, 0, 0.4);
&.active-item{
color: color($colors,third);
}
&:nth-child(2n){
margin-left: 5px;
}
&:nth-child(2n 1){
margin-right: 5px;
}
#triangle-topleft {
寬度: 0.1em;
高度: 0.1em;
border-top: 100px solid color($colors,primary); 。
border-right: 100px solid transparent;
border-radius: 20% 20% 53%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%)
skewX(30deg) scaleY(.866) translateX(-24%)。
浮動：左。
位置：相對。
}
img{
寬度：60px。
高度：60px。
物件適合：包含。
display: block;
margin: 0 auto;
margin-bottom: 10px。
}
.item-inner{
padding: 0;
.標簽{
margin: 0;
white-space:unset;
}
uj5u.com熱心網友回復：
你可以在左上角添加一個彩色的矩形，然后用clip-path剪出所需的形狀
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/319150.html
標籤：