How would you implement this design?

Hi all, thanks for clicking

I’m designing the webpage below to practice my web design skills and learn by doing. However I’m not sure how to make the shape I designed for the content body (the cone thing) in HTML or CSS so that it will be able to contain whatever I put in it (text, titles, images etc) and retain its position and scale when the browser window gets resized. I just don’t want to have a simple rectangle as my content container, how would you go about this challenge? SVG? CSS transformations? Anything helps!

One way to approach it might be to have a rectangular container, but at the top of it float orange “triangles” left and right, and then use the new CSS shapes module to force other content to wrap around those two triangles. That’s the only viable solution I can think of.

2 Likes

It’s surprising how many shapes can be made with just css.

But svg is a good option if you need something more complex or specific.

Maybe try using using two divs on the gray area and set the border property to 50%. I am not sure if the border-radius will work. If it does the text will wrap when resized.

Text inside svg is not simple :frowning:

Unfortunately border does not accept percentages :frowning:

Try this:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="GENERATOR" content="Mozilla/4.5 [en] (Win98; I) [Netscape]">
	<meta content="html validator validation firefox mozilla tidy w3c" name="keywords">	
	<title>SVG Stuff</title>
	<base href="https://kprorg.firebaseapp.com/">
</head>

<body>
  <h5 style="float:right; margin:0; padding:0;">
    <a href="https://www.sitepoint.com/community/t/how-would-you-implement-this-design/266174">
      Sitepoint Forums
    </a>
  </h5>    
  <h1 style="font-size:14.2px"> How would you implement this design </h1>

  <dl>
    <dt> CSS, SVG Responsive Example:</dt>

    <dd style="width:88%;  background-color: #ccc; text-align:center; font-size:12px; color:red;">

      <div style="width:42%; margin:1em auto 0; outline: dotted 1px #000; background-color:#eee;">
        
        <svg viewBox="0 0 20 10">
          <polygon 
            fill=red stroke-width=0 
            points="0,10   20,10   10,0"
          />
          <text x="50%" y="50%" font-size="1" text-anchor="middle">
            points="0,10 &nbsp; 20,10 &nbsp; 10,0"
          </text>
        </svg>

        <div style="background-color:snow;">
          svg viewBox="0 0  &nbsp;  20 10" 
          <br>
            x,y  points start at top-left, bottom-right
          <br>
            points="0,0  &nbsp; &nbsp; 20,20  &nbsp; &nbsp; 0,15"
          <p style="text-align:left; padding: 0.88em; color: #090;">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?
          </p><p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?
          </p>
        </div>

      <svg viewBox="0 0 20 10" style="border:dotted 1px blue;">
        <polygon 
          fill=lime stroke-width=0 
          points="0,0   10,10   20,0"
        />
        <text x="50%" y="50%" font-size="1" text-anchor="middle">
          points="0,0 &nbsp; 10,10 &nbsp; 20,0"
        </text>
      </svg>
    </div><!-- style="width:42%" -->
  </dd>  
</dl>


<div style="position:fixed; bottom:0; left:0; width:100%; background-color:#ddf; text-align:center;">
  Wonderful place for a footer
</div>  

</body>
</html>

##### Output: ![|499x500](upload://4RKd9E9IiqwmlBxpHisKiphyI0r.png)
1 Like

@John_Betong Thank you! It works perfectly, I knew nothing about the polygon tag or SVG view box so there is something for me to learn a research. One thing I still need to figure out is how to round the corners of the triangles but at least now I have a basic idea of how to implement my design.

Regards
BionicFox

Edit: I just found this —> https://codepen.io/kattixie/pen/ezzGKY for anyone needing to solve the issue as well.

1 Like

Hi there BionicFox,

here is one possible CSS example for you to try…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Arty Farty Layout</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }
#container {
    width: 80vw;
    margin: auto;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
    background-color: #fff;
}
#header, #footer {
    min-height:  8vw;
    padding: 1vw 0;
    box-sizing:  border-box;
    background-color:  #f15a22 ;
    color: #fff;
    text-align: center;
 }
#footer {
    padding-top: 2vw;
    background-color: #fff;
    color: #555;
 }
#top, #bottom {
    display: flex;
    justify-content: center;
    background-color: #f15a22 ;
   }
#bottom {
    clear: both;
    background-color: #fff ;
 }
#top div:first-of-type, #top div:last-of-type,
#bottom div:first-of-type, #bottom div:last-of-type { 
    width: 21.6vw;
    height: 15.12vw;
    background-image: linear-gradient(-35deg, #f2f2f2 0, #f2f2f2 50%, #f15a22 50%, #f15a22 100%);
 }
#top div:last-of-type {
    background-image: linear-gradient(35deg, #f2f2f2 0, #f2f2f2 50%, #f15a22 50%, #f15a22 100%);
}
#bottom div:first-of-type, #bottom div:last-of-type { 
    transform:rotateX(180deg);
    background-image: linear-gradient(-35deg, #f2f2f2 0, #f2f2f2 50%, #fff 50%, #fff 100%);
 }
#bottom div:last-of-type  {
    background-image: linear-gradient(35deg, #f2f2f2 0, #f2f2f2 50%, #fff 50%, #fff 100%);
 }
.side {
    float: left;
    width: 18.4vw;
    height: 13.54vw;
    background-color: #f15a22 
 }
#content {
    float: left;
    width: 43.2vw;
    padding: 1em;
    box-sizing: border-box;
    background-color: #f2f2f2 ;
 }
</style>
</head>
<body> 
<div id="container">
<div id="header">
 <h1>Header</h1>
</div>
<div id="top">
 <div></div>
 <div></div>
</div>
<div class="side">&nbsp;</div>
<div id="content">
 <h2>Lorem Ipsum</h2>
 <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
  bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
  posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
  Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, 
  sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet 
  nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo 
  odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. 
  Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur 
  purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
 </p><p>
  Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra 
  purus vitae lobortis. Sed et libero non diam tempor sagittis. Quisque vel egestas ipsum. 
  Integer sed elit eu orci blandit commodo in in erat. Donec blandit, mi at gravida varius, 
  nulla tellus vulputate ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque 
  penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur tristique 
  varius ullamcorper.
 </p>
<!-- #content --></div>
<div class="side">&nbsp;</div>
<div id="bottom">
 <div></div>
 <div></div>
</div>
<div id="footer">Footer</div>
<!-- #container --></div>
</body>
</html>

Sorry, but I have not looked at the rounding of the corners, as yet. :wonky:

coothead

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.