我希望在输入框(text)中创建一个三角形标签,效果与下图相同:
目前我已经做到了以下效果:
我该如何将这个三角形放置在输入框的边框下方,以避免输入框的边框半径切割该三角形?
以下是我的代码:
![input triangle corner with border radius](https://istack.dev59.com/bDxcV.webp)
![input triangle corner without border radius](https://istack.dev59.com/kDLqN.webp)
以下是我的代码:
<div class="input">
<label>email adress</label>
<div class="note">
<p>*</p>
<input type="text" placeholder="Enter your email adress">
</div>
</div>
.input {
display: flex;
flex-direction: column;
width: 100%;
}
.note > input {
width: 515px;
height: 48px;
border-radius: 5px;
border: 1px solid #7d7d7d;
box-shadow:inset 0 0 5px 1px lightgray;
padding-left: 20px;
color: #acacac;
-webkit-color: #acacac;
-moz-color: #acacac;
-ms-color: #acacac;
-o-color: #acacac;
font-size: 16px;
background-color: rgba(211, 211, 211, 0.50);
}
.note > input:focus {
outline: none;
background-color: #f9f9f9;
}
.note {
position: relative;
display: inline-block;
}
.note:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
display: block;
border-left: 35px solid transparent;
border-bottom: 35px solid transparent;
border-top: 35px solid #0094bb;
}
我想,没有办法给这个三角形自身添加border-radius属性而不失去其形状,对吗?