css input corner triangle label with border radius - html

Question

I would like to create an triangle label inside input (text) element exactly like this:
What I managed to do so far is this:
How can I put this triangle "under" the input border to, let's just say, keep border radius from input cutting the edge of this triangle?
This is my code:
<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;
}
I imagine there is no way to give border-radius to this triangle itself without losing its shape, am I right?

Answer 1

I added position absolute for your P tag and postioned it in the corner.
The border radius is achieved by adding a border radius to your .note wrapper and setting overflow:hidden.
.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;
border-radius: 5px;
overflow:hidden;
}
.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;
z-index:0;
}
.note p{
position: absolute;
right: 5px;
top: 5px;
color:white;
z-index:1;
margin:0;
padding:0;
}
label {
display:block;
}
<div class="input">
<label>email address</label>
<div class="note">
<p>*</p>
<input type="text" placeholder="Enter your email adress">
</div>
</div>

Answer 2

Consider declaring the pseudo-element to a nested element of .note instead.
This will allow you to specify the required border-radius property on the containing element rather than the pseudo-element. With an overflow: hidden rule declared on this new containing element in addition, the top-right corner of the pseudo-element will be "cut-off" from view, conveying the impression that this is an element nested within the input field.
Code Snippet Demonstration:
.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;
}
/* additional */
.note .required {
position: absolute;
top: 0;
right: 0;
z-index: 1;
color: white;
padding: 5px;
box-sizing: border-box;
border-top-right-radius: 5px;
overflow: hidden;
width: 35px;
height: 35px;
text-align: right;
}
.note .required: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;
z-index: -1;
}
<div class="input">
<label>email adress</label>
<div class="note">
<span class="required">*</span>
<input type="text" placeholder="Enter your email adress">
</div>
</div>

Answer 3

The closest i could get with your solution. But I found other ways you're satisfied with this okay...
.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;
line-height: 48px;
text-align: top;
border-left: 35px solid transparent;
border-bottom: 35px solid transparent;
border-top: 35px solid #0094bb;
}
.note::before {
content: "*";
position: absolute;
right: 7px;
z-index: 1;
top: 5px;
color: white;
}
<div class="input">
<label>email adress</label>
<div class="note">
<input type="text" placeholder="Enter your email adress">
</div>
</div>