CSS borderler arası çizgi ile bağlantı

04-08-2014, 10:57:02

#1

VeLi33

merhabalar;

PHP ve CSS ile soy ağacı scripti hazırlamaya çalışıyorum planım css borderler ile kutu eklemek bu kutunun içinde kişinin fotoğrafı ve ismi olacak. İki kardeş yanyana gelecek şekilde sıralanacak aralarında 10 px boşluk kalacak bu boşlukta bir çizgi ile birbirlerine borderler bağlanacak yukarıda anne ve babalarının bilgileri olacak aynı şekilde yukarıya doğru da bir çizgi olacak örnek olarak resim atıyorum bu çizgilerin css de adı nedir css den pek anlamıyorum?
06-08-2014, 11:51:15

#2

ercu145

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">

.cizgi{
margin-top:200px;
margin-left:200px;
border:3px solid green;
width:300px;
height:80px;
border-radius:15px;
border-bottom:none;
border-left:none;
transform:rotate(-90deg);
z-index:-1;
}
.resim{
width:150px;
height:150px;
border:1px solid green;
margin-left: 240px;
margin-top: 87px;
background:#000;
border-radius:10px;
}
.ust{
background:#D90000;
margin-left: 383px;
margin-top: -497px;
}
#ucgen{
width: 0px;
height: 0px;
border-bottom: 10px solid #008000;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
transform: rotate(-270deg);
margin-top: -88px;
margin-left: 370px;

}

</style>
</head>
<body>
<div class="cizgi"></div>
<div class="resim"></div>
<div class="resim ust"></div>
<div id="ucgen"></div>
</body>
</html>