put forms in the borders of an html block [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I would like to achieve something like this (Puttings the cercle and triangle in the borders of an html block).
Here's the css of my block:
.block {
color: red;
}
.cercle {
border-radius: 50%;
}
.triangle {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid red;
}

Answer 1

What you need to do is use absolute positioning, and instead of using borders use the CSS3's transform property.
Try this as an example:
.box {
padding: 50px;
border: 1px solid black;
display: inline-block;
}
.block {
background: red;
height: 100px;
width: 200px;
display: inline-block;
float: left;
position: relative;
border: 2px solid #880015;
}
.circle {
border-radius: 50%;
position: absolute;
width: 25px;
height: 25px;
background: red;
top: -12px;
right:-2px;
border: 2px solid #880015;
border-bottom: 0;
border-left: 0;
}
.triangle {
background: red;
position: absolute;
width: 20px;
height: 20px;
top: 5px;
right: -12px;
transform: rotate(45deg);
border: 2px solid #880015;
border-bottom: 0;
border-left: 0;
}
<div class="box">
<div class="block">
<div class="circle"></div>
<div class="triangle"></div>
</div>
</div>

Answer 2

Have a look at this article, it explains some of the features you are trying to achieve, but it involves solid images, rather than css only.
As a simpler solution, I suggest you to try with a DIV inside a DIV, and have all the content and the simple border in the inner div, and the custom elements (cercle, triangle) inside the outer div.

Answer 3

I made an example with an cicle, from here it should be easy enough to add other shapes.
html
<div class="wrapper">
<div class="square">
<div class="circle"></div>
</div>
</div>
css
.wrapper {
margin: 25px;
}
.square {
width: 300px;
height: 100px;
border: 5px solid red;
}
.circle {
width: 50px;
height: 50px;
border-radius: 50px;
background-color: pink;
position: absolute;
margin-left: 275px;
margin-top: -25px;
}
See https://jsfiddle.net/b8dthdwn/3/

Answer 4

You will need to use some HTML code first.
something like:
<div class="block">4
<div class="circle"></div>
<div class="triangle"></div>
</div>
And here is the CSS code:
.block {
background: red;
display: block;
width: 180px;
height: 90px;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
position: fixed;
top: 0.3px;
left: 170px;
z-index: 9999;
background: #000;
}
.triangle {
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left:10px solid blue;
position:fixed;
top: 10px;
left: 187px;
}
You can use position: fixed to set the element position with top, left.
You can use z-index to make things to display above each other...
see example on jsbin