0

How can I came a div that looks like this: Arabesque Shape using css? Would it be a mix of triangle and circles? I'm not really sure.

  • Mmm that would look cool! Maybe also use border radius? – Carl Shiles Jun 16 '17 at 19:38
  • yeah you can rotate one div and then make four ciricles using border radius but I'm assuming you are okay with a solid color without outlines right? – Adrianopolis Jun 16 '17 at 19:46
  • 1
    At one time I would say that people need to remember that CSS is not a drawing program. While there are a number of people who took effort to create great things using CSS alone, I still think people need to remember that CSS is not a drawing program but a document styler. – Rob Jun 16 '17 at 19:55
  • I know it's not for drawing. But, for what I am trying to do I need a bunch of that shape that can be any size based on the text inside of it. So making
    in that shape makes it much easier.
     –  Jun 16 '17 at 20:00
  • Try this https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths – Nimish Jun 16 '17 at 20:19

2 Answers2

0

An easy way to create clickable chapes is with svg images.

Guide to change the style of an SVG when you click on it

a:focus {
  fill: pink;
  stroke: red;
  stroke-width: 1;
}
<svg viewBox="0 0 95 50">
  <a xlink:href="#0">
    <circle cx="20" cy="25" r="5" data-Name="shape 1" data-tabindex="0" />
  </a>
  <a xlink:href="#0">
    <circle cx="40" cy="25" r="5" data-Name="shape 2" data-tabindex="0" />
  </a>
  <a xlink:href="#0">
    <circle cx="60" cy="25" r="5" data-Name="shape 3" data-tabindex="0" />
  </a>
  <a xlink:href="#0">
    <circle cx="80" cy="25" r="5" data-Name="shape 4" data-tabindex="0" />
  </a>
</svg>

The guide references an other "similar" stackoverflow question

Of course, this element is not a "div" but I would suppose that you want to click or colorise this shape which are doable with an SVG.

Dominic Paré
  • 41
  • 6
  • He wants to use a div so you aren't answering the question. – Rob Jun 16 '17 at 19:54
  • Yeah, that does not really help, but thanks. I want to use div, and my problem is with the creation of shape not the clicking. –  Jun 16 '17 at 19:56
  • @Rob You are right. This is still the most simple/logical way in my opinion (from what I know) to show/interact with "arabesque"/weird shaped DOM objects. – Dominic Paré Jun 16 '17 at 19:58
  • Like @Rob said in a comment on your question "CSS is not a drawing program". Rob also said "there are a number of people who took effort to create great things using CSS alone". Here are good examples of efforst: http://www.svennerberg.com/2008/09/imagemap-rollover/ (maybe you can ignore the javascript?) https://stackoverflow.com/a/12128398/6529948 – Dominic Paré Jun 16 '17 at 20:09
0

You can do it this way but I agree other ways to do without just using a bunch of divs.

Markup:

<div class="shape-wrapper">
  <div class="shape-square"></div>
  <div class="shape-circle circle-top-left"></div>
  <div class="shape-circle circle-top-right"></div>
  <div class="shape-circle circle-bottom-left"></div>
  <div class="shape-circle circle-bottom-right"></div>
</div>

CSS:

.shape-wrapper {
  width: 200px;
  height: 200px;
  background-color: white;
  position: relative;
}
.shape-wrapper div {
  background-color: red;
  position: absolute;
}
.shape-square {
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.shape-circle {
  width: 60%;
  height: 60%;
  -webkit-border-radius: 60%;
  -moz-border-radius: 60%;
  border-radius: 60%;
}

.circle-top-left {
  top: 0;
  left: 0;
}
.circle-top-left {
  top: 0;
  left: 0;
}
.circle-top-right {
  top: 0;
  right: 0;
}
.circle-bottom-left {
  bottom: 0;
  left: 0;
}
.circle-bottom-right {
  bottom: 0;
  right: 0;
}
Adrianopolis
  • 1,272
  • 1
  • 11
  • 15