html或css中不规则形状的框架/边框

Question

我是html和css的新手，我的任务是创建一个边框形状不规则的布局，如下所示：frame pic

我删除了所有其他内容。我目前没有明确处理如何使用指向按钮的三角形指针接近白色区域。 （该形状将包含更多内容。）

你会建议什么？

Answer 1

一种方法是将方形div旋转45度并显示两个边框。 使用@quid提供的代码段：

#arrow {
  background: #ffffff;
  border-top: 1px solid #dcdcdc;
  border-left: 1px solid #dcdcdc;
  position: absolute;
  height: 30px;
  width: 30px;
  top: 0;
  right: 20px;
  margin-top: -16px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(45deg);
}

Answer 2

添加@Banderi的箭头

以下是这项工作的小提琴：http://jsfiddle.net/frnm9ymo/7/

通过这次最近的编辑，我甚至为你配色。

这不是我确定的最优雅的解决方案，但它确实有效。您只需使箭头图像与框的颜色匹配，然后通过边框的宽度重叠边框。红色框内部将是具有透明背景的png图像。要记住的最重要的事情是箭头div将是绝对的＆＃34;定位，它的父母div必须是＆＃34; relative＆＃34;地定位。

CSS：

* {
  font-family: arial;
}

#wrapper {
  background: #c7dae7;
  width: 400px;
  nin-height: 400px;
  display: block;
  float: left;

}

#container {
  margin: 20px;
  display: block;
  background: #f6f7fb;
  border: 1px solid #dfe2eb;
}

#titlebar {
  margin: 0;
  padding: 15px 20px;
  display: block;
  background: #fff;
  overflow: none;
  min-height: 30px;
  border-bottom: 1px solid #dfe2eb;
}

#contents {
  margin: 0 0 -40px 0;
  padding: 7px;
  display: block;
}

#textwrap {
  margin: 5px;
  padding: 10px 20px;
  display: block;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  position: relative;
  -webkit-border-radius: 15px 5px 15px 5px;
  -moz-border-radius: 15px 5px 15px 5px;
  border-radius: 15px 5px 15px 5px;

}

textwrap p {
  z-index: 100;
}

#enter {
  float: right;
  width: 80px;
  padding: 7px;
  background: #4992e6;
  color: #fff;
  font-weight: bold;
  border: 0;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

#arrow {
  background: #ffffff;
  border-top: 1px solid #dcdcdc;
  border-left: 1px solid #dcdcdc;
  position: absolute;
  height: 30px;
  width: 30px;
  top: 0;
  right: 30px;
  margin-top: -17px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(45deg);
  z-index: 50;
}

HTML：

<div id="wrapper">
<div id="container">
  <div id="titlebar">
  text

  <button id="enter">
   ENTER
  </button>
  </div>
  <div id="contents">

  <div id="textwrap">
  <div id="arrow">

  </div>
  <p>
    VHS artisan forage cornhole echo park, PBR&B ugh lomo poutine readymade cray gastropub wolf YOLO. Ugh tattooed umami, brooklyn VHS chambray crucifix celiac fixie. Pabst ennui neutra, chia truffaut brunch microdosing chartreuse flexitarian heirloom typewriter. Bushwick tattooed four dollar toast ramps, lomo sartorial pabst bicycle rights. Viral brunch direct trade chartreuse. Vegan squid pinterest, umami sartorial intelligentsia truffaut vice freegan normcore beard venmo pour-over. Direct trade knausgaard master cleanse plaid, wayfarers kogi kombucha keffiyeh.

Mustache chicharrones meggings, kale chips distillery yuccie lumbersexual shabby chic beard master cleanse crucifix blue bottle pour-over venmo. Sustainable pabst cronut whatever kale chips cliche everyday carry kinfolk, fap chicharrones gluten-free meggings microdosing umami. Irony selvage jean shorts synth gastropub, roof party keytar. Franzen fixie lumbersexual, mustache church-key flannel synth everyday carry gluten-free chartreuse pitchfork shoreditch. Tumblr viral chillwave mlkshk paleo. Jean shorts swag meggings pabst distillery tote bag. Pour-over messenger bag PBR&B cold-pressed VHS.
  </p>

  </div>

  </div>
</div>

</div>