مربع و دایره

Question

مربع و دایره

سوال

سلام دوستای درسمنی عزیز، یه سوال خیلی راحت براتون تو ضمیمه گذاشتم. هر کسی به هر روشی که تونست کدش رو بزنه. منتظر جواباتون هستم!

ضمیمه ها

در حال بررسی 2

HTML-CSS Fatemeh Golshanipaydar 5 سال 1 پاسخ 706 دیده شده 2

درباره Fatemeh Golshanipaydar

Full-stack developer with experience designing, developing, and maintaining large-scale web applications within collaborative team environments, following Agile/SCRUM methodologies. Expert in translating business requirements into efficient applications through effective stakeholder communication. Always finding ways to learn new tools and skills :Top skills Angular, TypeScript, .NET Framework, C#, Css

مرا دنبال کنید

پاسخ ( ۱ )

ارسال یک پاسخ

سوال قبلی

سوال بعدی

yashar · Answer 1 · ۱۳۹۹-۰۲-۰۳

سلام وقت بخیر

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding: 80px;
        }

        #rectangle {
            width: 150px;
            height: 150px;
            border: 1.5px solid black;
            position: absolute;
        }

        #circle1 {
            width: 30px;
            height: 30px;
            border: 1px solid black;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            top: -15px;
            left: -15px;
        }

        #circle2 {
            width: 30px;
            height: 30px;
            border: 1px solid black;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            bottom: -15px;
            left: -15px;
        }

        #circle3 {
            width: 30px;
            height: 30px;
            border: 1px solid black;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            bottom: -15px;
            right: -15px;
        }

        #circle4 {
            width: 30px;
            height: 30px;
            border: 1px solid black;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            top: -15px;
            right: -15px;
        }
    </style>

</head>

<body>
    <div id="rectangle">
        <div id="circle1"></div>
        <div id="circle2"></div>
        <div id="circle3"></div>
        <div id="circle4"></div>
    </div>

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

body {

padding: 80px;

}

#rectangle {

width: 150px;

height: 150px;

border: 1.5px solid black;

position: absolute;

}

#circle1 {

width: 30px;

height: 30px;

border: 1px solid black;

background-color: white;

border-radius: 50%;

position: absolute;

top: -15px;

left: -15px;

}

#circle2 {

width: 30px;

height: 30px;

border: 1px solid black;

background-color: white;

border-radius: 50%;

position: absolute;

bottom: -15px;

left: -15px;

}

#circle3 {

width: 30px;

height: 30px;

border: 1px solid black;

background-color: white;

border-radius: 50%;

position: absolute;

bottom: -15px;

right: -15px;

}

#circle4 {

width: 30px;

height: 30px;

border: 1px solid black;

background-color: white;

border-radius: 50%;

position: absolute;

top: -15px;

right: -15px;

}

</style>

</head>

<body>

</div>

</body>

</html>