Question

我想为包含所需输入字段的星号创建一个右上角三角形。我设法将星号放在输入框内，背后有红色背景。我只是不知道如何使包含星号的方框成为右上角的三角形。有人有什么建议吗？这是我的代码，控制星号框的类是css部分中的最后一个。

＆＃13;

* {
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
  -moz-font-smoothing:antialiased;
  -o-font-smoothing:antialiased;
  font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.container_contact {
  max-width:400px;
  width:100%;
}
.contact_input, .contact_textarea {
  font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif;
}
#contact_me {
  background:#F9F9F9;
  padding:25px;
  padding-top: 0px;
  border: 1px solid #e8e8e8;
}
#contact_me h3 {
  margin-top: 5px;
  margin-bottom: 0px;
  color: #F96;
  font-size: 30px;
  font-weight: 400;
}
#contact_me h4 {
  font-size:13px;
}
fieldset {
  border: medium none !important;
  margin: 0 0 10px;
  min-width: 100%;
  padding: 0;
  width: 100%;
}
.contact_input, .contact_textarea {
  width:100%;
  border:1px solid #CCC;
  background:#FFF;
  margin:0 0 5px;
  padding:10px;
}
.contact_input:hover, .contact_textarea:hover {
  -webkit-transition:border-color 0.3s ease-in-out;
  -moz-transition:border-color 0.3s ease-in-out;
  transition:border-color 0.3s ease-in-out;
}
.contact_textarea {
  height:100px;
  max-width:100%;
  min-width: 100%;
}
#contact_me button[type="submit"] {
  cursor:pointer;
  width:100%;
  border:none;
  background:#0CF;
  color:#FFF;
  margin:0 0 5px;
  padding:10px;
  font-size:15px;
}
#contact_me button[type="submit"]:hover {
  background:#09C;
  -webkit-transition:background 0.3s ease-in-out;
  -moz-transition:background 0.3s ease-in-out;
  transition:background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active {
  box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.error {
    border: 2px solid red;
}
.valid {
    border: 2px solid green;
}
[id$='-error'] {
  background: #c51244;
  padding: 10px;
  border: 0;
  position: relative;
  box-shadow: 1px 1px 1px #aaaaaa;
  display: none;
  margin-top: -11px;
  margin-bottom: 5px;
}
[id$='-error']:before {
  content: '';
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #c51244;
  position: absolute;
  top: -10px;
}
.required_asterisk {
  position: relative;
  display: inline-block;
  z-index: 1;
}
.required_asterisk input {
  padding-right: 35px;
}
.required_asterisk:after {
  content: "*";
  position: absolute;
  background-color: red;
  text-align: right;
  height: 85%;
  width: 30px;
  right: 0px;
  top: 0px;
  color: white;
  z-index: 5;
}

＆＃13;

<div class="container_contact">
  <form id="contact_me" action="" method="post">
    <h3>Kontakt meg</h3>
    <h4>Kontakt meg idag, og få svar innen 24 timer!</h4>
    <fieldset class="required_asterisk">
      <input placeholder="Ditt navn" name="contact_name"  id="contact_name" class="contact_input required" type="text"  tabindex="1" autofocus>
    </fieldset>
    <fieldset>
      <input placeholder="Din email adresse" name="contact_mail" id="contact_mail"  class="contact_input"  type="text" tabindex="2">
    </fieldset>
    <fieldset>
      <input placeholder="Firma navn (valgfri)" name="contact_firmname" id="contact_firmname"  class="contact_input" type="text" tabindex="3">
    </fieldset>
    <fieldset>
     <input placeholder="Ditt telefon nummer (valgfri)" name="contact_tel" id="contact_tel"  class="contact_input" type="text" tabindex="4">
    </fieldset>
    <fieldset>
      <input placeholder="Din/deres web side (valgfri)" name="contact_webpage" id="contact_webpage"  class="contact_input" type="text" tabindex="5">
    </fieldset>
    <fieldset>
      <input placeholder="Emne" id="contact_subject" name="contact_subject"  class="contact_input" type="text" tabindex="6">
    </fieldset>
    <fieldset>
      <textarea placeholder="Din melding..." id="contact_message" class="contact_textarea"  name="contact_message" tabindex="7"></textarea>
    </fieldset>
    <fieldset>
      <button name="submit" type="submit" name="contact_submit" id="contact_submit" onclick="" data-submit="...Sending">Send melding</button>
    </fieldset>
  </form>
</div>

＆＃13;

Answer 1

只需将linear-gradient用于background-image。

＆＃13;

.required_asterisk:after {
  background-color: rgba(255, 255, 255, 0);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0) 55%, red 55%);
}

＆＃13;

Answer 2

您可以使用HTML5 required属性来简化代码，即：

<input placeholder="Ditt navn" name="contact_name" required>

然后使用更简单的CSS将三角形直接绘制到文本字段中：

[required] { background: linear-gradient(225deg, red 5px, white 5px); }

输入字段内的右上角三角形

2 个答案: