NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
Kamil
Člen
Avatar
Kamil:27.5.2022 21:28

Ahoj, chtěl bych ohnout tvar a nevím jak to udělat.

Zkusil jsem: -

Chci docílit: -

 
Odpovědět
27.5.2022 21:28
Avatar
Kamil
Člen
Avatar
Kamil:27.5.2022 21:28

zatim mám jen toto

 
Nahoru Odpovědět
27.5.2022 21:28
Avatar
Kamil
Člen
Avatar
Kamil:27.5.2022 21:29

Podotýkám je to dělané v css a html.

 
Nahoru Odpovědět
27.5.2022 21:29
Avatar
Kamil
Člen
Avatar
Kamil:27.5.2022 21:42 
*{
    margin:0px;
    padding:0px;
    font-family: 'Archivo', sans-serif;
}
body{
    background: rgb(165, 19, 19);
    display: flex;
    justify-content: center;
    align-items: center;
}
.box{
    margin-top:100px;
    border:1px ouset white;
    background: white;
    width:350px;
    height:300px;

}
.cerny-box-text{
    width:155px;
    height:160px;
    background: black;
    border-radius:50%;
    position:relative;top:20%;left:27%;
    z-index: 1;
    border:3px solid white;

}
.cerny-box-text p{
    color:white;
    font-size:120px;
    text-align: center;
    padding-top:15px;
    font-weight: bold;
}
.cerny-box-text2{
    width:165px;
    height:170px;
    background: black;
    border:2px solid black;
    border-radius:50%;
    position:relative;top:-36.5%;left:25.8%;
}
.modra{
    width:40px;
    height:21px;
    background: #2559AC;
    transform: rotate(20deg);
    border:1px solid black;
    position:relative;top:-43%;left:33%;
    z-index: 1;
    border-radius:10px 10px 10px 10px
}
.oranzova{
    width:40px;
    height:21px;
    background: #F8A519;
    border:1px solid black;
    position:relative;top:-48.4%;left:43%;
    z-index: 1;
    border-radius:5px;
}
.cervena{
    width:40px;
    height:21px;
    background: #bf4040;
    border:1px solid black;
    position:relative;top:-56%;left:53%;
    z-index: 1;
    border-radius:5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@300&family=Bree+Serif&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>
<body>
    <section class="box">
            <section class="cerny-box-text">
                    <p>S</p>
            </section>
            <section class="cerny-box-text2">

            </section>

            <section class="modra">

            </section>
            <section class="oranzova">

            </section>
            <section class="cervena">

            </section>
    </section>
</body>
</html>
 
Nahoru Odpovědět
27.5.2022 21:42
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:28.5.2022 19:52

Co jsi nasel googlem? Pises, za jsi nic nezkusil. Ani google? Opravdu? Proc? :)

  1. css umi zakulacene okraje, tusim i oval. hranaty horni okraj se da schovat pres z-index za ten prvni obrazek
  2. css umi pridat base64 url pro background. https://www.base64-image.de

google = image convert to base 64
google = round corner css
google = round image css

<!DOCTYPE html>
<html>

<head>
    <style>
        img {
            border-radius: 58%;
        }
    </style>
</head>

<body>
    <h2>GeeksForGeeks</h2>

    <h2>
        How to create a Circular/
        Rounded images using CSS?
    </h2>

    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="GeeksforGeeks logo"
            width="200" height="160"
            border="5">
</body>

</html>
 
Nahoru Odpovědět
28.5.2022 19:52
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:28.5.2022 19:59

google = arc image css

div {clip-path: polygon (...);}

https://stackoverflow.com/…age-with-css
https://css-tricks.com/…apes-of-css/
Cone Shape

#cone {
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 100px solid red;
  border-radius: 50%;
}
 
Nahoru Odpovědět
28.5.2022 19:59
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:28.5.2022 20:01

Muzes pouzit i :before :after, abys snizil pocet html elementu

 
Nahoru Odpovědět
28.5.2022 20:01
Avatar
Ondřej Šrytr
Člen
Avatar
Odpovídá na Kamil
Ondřej Šrytr:31.5.2022 17:44

Ahoj,

co tě nutí dělat to za pomocí HTML + CSS? Je vysoká šance, že se ti to může "rozbít". Lepší by bylo to mít jako SVG ikonku, kterou si můžeš zmenšovat/zvětšovat podle potřeby a šlo by i zařídit, abys k jednotlivým prvkům v logu měl přístup.

 
Nahoru Odpovědět
31.5.2022 17:44
Avatar
Kamil
Člen
Avatar
Odpovídá na Ondřej Šrytr
Kamil:3.6.2022 20:30

Ahoj, chtěl jsem si to jen zkusit. :)

 
Nahoru Odpovědět
3.6.2022 20:30
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.