Question

尝试通过将两个边界div一起变形来在css中创建这种不规则形状，但我最终得到了尖锐的尖头关节，这些关节并没有完全覆盖我的形状边界。

HTML

<div id="login-panel">
  <div class="sign-up-activated">
    <div class="sign-up-tab">FOO</div>
    <div class="sign-up-txtfield"></div>
  </div>
</div>

CSS

.sign-up-activated {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 298px;
  height: 194px;
  background-color: red;
  z-index: 2;
}

.sign-up-tab {
  width: 82px;
  height: 56px;
  float: right;
  font-size: 13px;
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  line-height: 40px;
  border: 6px solid blue;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom-color: green;
  border-radius: 5px 5px 0px 0px;
  text-transform: lowercase;
  background-color: green;
  position: relative;
  z-index: 10;
}

.sign-up-txtfield {
  position: relative;
  top: -6px;
  width: 297px;
  height: 194px;
  float: right;
  border: 6px solid blue;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 5px 0px 5px 5px;
  background-color: green;
}

Answer 1

You could use inset shadow:

.sign-up-tab {
  width: 82px;
  height: 56px;
  float: right;
  font-size: 13px;
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  line-height: 40px; 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
    padding:6px;/* keep content away as if there was a 6px border */
  box-shadow:inset 6px 6px blue,inset -6px 6px blue;/* draw inside shadow to fake border */
  border-radius: 5px 5px 0px 0px;
  text-transform: lowercase;
  background-color: green;
  position: relative;
  z-index: 10;
}

.sign-up-activated {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 298px;
  background-color: red;
  z-index: 2;
}
.sign-up-tab {
  width: 82px;
  height: 56px;
  float: right;
  font-size: 13px;
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  line-height: 40px;
  box-sizing: border-box;
  border-radius: 5px 5px 0px 0px;
  text-transform: lowercase;
  background-color: green;
  position: relative;
  z-index: 10;
  padding: 6px;
  box-shadow: inset 6px 6px blue, inset -6px 6px blue
}
.sign-up-txtfield {
  position: relative;
  top: -6px;
  width: 297px;
  height: 194px;
  float: right;
  border: 6px solid blue;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 5px 0px 5px 5px;
  background-color: green;
}

<div id="login-panel">
  <div class="sign-up-activated">
    <div class="sign-up-tab">FOO</div>
    <div class="sign-up-txtfield"></div>
  </div>
</div>

https://jsfiddle.net/usapz45z/3/

如何设置边界结束关节而不是锋利的关节？

1 个答案: