مربع و دایره

Question

مربع و دایره

سوال

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

ضمیمه ها

در حال بررسی 2

HTML-CSS فاطمه گلشنی پایدار 4 سال 1 پاسخ 603 دیده شده 2

درباره فاطمه گلشنی پایدار

مهندس برق قدرت مسلط به CSharp Asp.Net Angular TypeScript JavaScript Html Css Bootstrap , , , مسلط به زبان انگلیسی علاقه مند به ریاضیات و برنامه نویسی

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

پاسخ ( ۱ )

ارسال یک پاسخ

سوال قبلی

سوال بعدی

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>