Question

我在codepen上找到了这样的代码，这里是链接：https://codepen.io/FStop/pen/uvenj

如何使用6和8个三角形进行此操作？

public class TaskScheduler
{
    private static TaskScheduler _instance;
    private List<Timer> timers = new List<Timer>();

    private TaskScheduler() { }

    public static TaskScheduler Instance => _instance ?? (_instance = new TaskScheduler());

    public void ScheduleTask(int hour, int min, double intervalInHour, Action task)
    {
        DateTime now = DateTime.Now;
        DateTime firstRun = new DateTime(now.Year, now.Month, now.Day, hour, min, 0, 0);
        if (now > firstRun)
        {
            firstRun = firstRun.AddDays(1);
        }

        TimeSpan timeToGo = firstRun - now;
        if (timeToGo <= TimeSpan.Zero)
        {
            timeToGo = TimeSpan.Zero;
        }

        var timer = new Timer(x =>
        {
            task.Invoke();
        }, null, timeToGo, TimeSpan.FromHours(intervalInHour));

        timers.Add(timer);
    }
}

你可以在codepen链接上看到css代码......我不能在这里粘贴......很难在这里问一下

Answer 1

你的意思是如何从这六个中制作八个三角形？如果你的意思是只添加两个div元素与“三角形”类，并玩数字。 rotation必须为45deg，因为您现在有八个三角形（360：8），width必须符合您现在拥有的三角形数量。在玩了一下之后，我得到了以下解决方案：

HTML：

<div class="hexagon">
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
</div>

CSS：

body{
  padding: 25px;
}

@mixin hexagon($width: 100px, $color: #19c, $dir: down){
  // Math for calculating the height of equilateral triangle
  // Rounding this up helps a little with sub pixel rendering BS
  $height: ceil($width*(sqrt(3))/2);
  height: $height;
  width: $width;
  position: relative;
  // might as well center the thing
  margin: 0 auto;
  transform-origin: 0 0;
  transform: translateX($width/2) rotate(30deg);
  .triangle{
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: $height/3 $width/8.5 0;
    border-color: #19c transparent;
    transform-origin: $width/8.5 $height/3 + 2;
    // Sass function to auto generate rotation
    $deg: 45deg;
    @for $i from 1 through 7{
      &:nth-child(#{$i}){
        transform: rotate(#{$deg});
      }
      $deg: $deg + 45;
    }
    &:nth-child(5), &:nth-child(6){
      border-color: lighten(#19c,25%) transparent;
    }
    &:nth-child(2), &:nth-child(3){
      border-color: darken(#19c,10%) transparent;
    }
  }
}

.hexagon{
  @include hexagon(300px);
}

codePen Example

如何制作具有6和8个三角形的响应六边形

1 个答案: