CODEWITHSUNDEEP
htmlcss
hholtij
hholtij

Reputation: 2936

Irregular shaped frames/borders in html or css

I am fairly new to html and css and I have been tasked to create a layout with irregularly shaped borders as depicted here: frame pic

enter image description here

I removed all the other content. I currently have no clear handle on how to approach the white area with the triangular pointer pointing at the button. (That shape will contain more content.)

What would you suggest?

Upvotes: 2

Views: 1492

Answers (2)

quid
quid

Reputation: 1034

added the arrow from @Banderi

Here's a fiddle with this working: http://jsfiddle.net/frnm9ymo/7/

With this most recent edit I even matched the colors for you.

It's not the most elegant solution I'm sure, but it works. You just make the arrow image match the colors of the box then overlap the border by whatever the width of the border is. Inside the red box would be a png image with a transparent background. The most important thing to remember is the arrow div will be "absolute" positioned and it's parent div must be "relative" positioned.

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>

Upvotes: 2

Banderi
Banderi

Reputation: 710

One method would be to rotate a square div by 45 degrees and have two borders visible. Using the snippet provided by @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);
}

Upvotes: 3

Related Questions